Social-links-profile using CSS Grid

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hey,

  Issue I see here with your img is that it is very large then what you need and it is got more height then width, Solution here is to add this to your img like the image above.

  img {
      max-width: 5.5rem;
      width: 100%;
      height: auto;
      border-radius: 50%;
      /* width: 100%; */  Remove this
      /* height: 4em; */ Remove this
      /* border-radius: 4em; */ Remove this
      margin-top: 2em;
  }
  

  It wont be perfect circle because of the img you have uploaded, border-radius: 50% ensures a perfect circle, It is also a bad idea to add a large photo because it takes longer to load the page because of the file size.

  • You are hosting the font which is great but now you need to apply it to your body Just like you would any other font font-family: inter;.

  • I would then maby add margin-inline: 1rem; to your card so it is not touching the edge on smaller screens, Margin-inline just means left and right, Normal margin means left right up and down.

  Marked as helpful

  1
• 

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  This is really badly overflowing my screen on the side. I'll add a screenshot to discord for you so you can see — but it's always important to test your solutions down to 320px wide. You can do that in dev tools using device emulation or simply having it open on the side and making the viewport narrower (and/or zooming in browser).

  • a likely cause is the max-width 100% on the component. That is usually part of a css reset in img elements and not what you want on components. You need to set a max-width in rem instead. Make sure you understand why and don't just blindly follow advice. Change it in browser, play with the screen size and zoom, understand the differences of each change.
  • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • you certainly shouldn't be needing any negative margins in this. That's a sign something is wrong with either line height or margins in your project.
  • when you use font size in rem don't round the values to what you think look "neat". Use the actual rem value for the pixels you want, to 3 decimal places if necessary.
  • the card should have padding on all sides. The child elements within it should only need vertical margins. (Or the gap property can be used on the parent element if it is a grid or flex display).

  Marked as helpful

  1

  ---

  

  rawatdinesh10•30

  @rawatdinesh10Posted about 2 months ago

  @grace-snow I have modified my code quite a bit now. Hope it shows well now on smaller screen. Please see if the issue has been resolved or not. Thank you so much for your valuable feedback.

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @rawatdinesh10 I still see some issues in this.

  The image is appearing like an oval shape. With an image like that it's best to give it an exact width and height, optionally with an aspect-ratio property as well (set to 1) and with an object-fit: cover so the image doesn't distort.

  The location definitely is not a heading for the content below. It's just a paragraph.

  You're setting font sizes to be unreadably small in this! The style guide says the body text should be 14px, which when converted to rem means it should be 0.875rem.

  The card should have padding. The children inside the card should only need vertical margins. If you're struggling to understand the differences this post I wrote may help: https://fedmentor.dev/posts/padding-margin.

  The list of links needs to be in a list.

  The links shouldn't have huge inline-padding. Keep padding small.

  You need to apply the design's font styles (family and weights).

  Make sure the component can never touch screen edges with a little padding on a wrapping element (like main or body). Usually this can be in pixels.

  Marked as helpful

  1

  

  rawatdinesh10•30

  @rawatdinesh10Posted about 2 months ago

  @grace-snow I have made changes according to your instructions, but now I'm struggling with list of links, I'm not able to make them the size of the design and center them. Please help me to solve this. Please suggest any other improvements required.

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @rawatdinesh10 Inspect in dev tools and you'll see the list has default paddings and margins. You've already been advised to include a full modern CSS reset which would generally resolve this as soon as you add it and include a class on your list. Otherwise you can override the default styles yourself. You must learn to use devtools elements panel, it's essential to understand what CSS is being applied to each element. Open it on the side of the screen so you can still zoom in and out and see what you need to in browser at the same time as viewing/changing styles in the elements panel.

  The links all have inline margin when they shouldn't.

  You've also added display: grid; place-content: center; on the card which will be making all elements shrink as narrow as possible. Be intentional about every style you apply. Does this card need those properties? If so there should be a good reason. Without that the links would be full width because you've set them to display block already. But with that you would need to make the list full width or give it a justify-self: stretch; so it fills the available horizontal space.

  Go through your HTML and CSS line by line. Add the reset at the top of the styles and then remove anything that's unnecessary in both HTML and CSS. Simple and intentional is the goal.

  For example, the card should be inside the main landmark it shouldn't be the main landmark. So put a div inside and style that as your card. The .rao div can be removed altogether. The card can be text-align center. The card needs more padding. The children in the card all need some vertical margins, but no inline margins... etc

  Marked as helpful

  1

  

  rawatdinesh10•30

  @rawatdinesh10Posted about 2 months ago

  @grace-snow I have used css reset in the beginning of css. changed it from grid to flexbox property. I tried chrome dev tools to see changes. but I'm still not able to make it exactly like the design file. Like the p element is not fitting as per design file, and link lists are not as per design files too. Pleade help me to improve my solution and make it exactly like the design file.

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @rawatdinesh10 it's still not got a full modern css reset. Look them up.

  And it's still not got enough padding on the card.

  And it's more complicated than it needs to be making the card a flex column that centers everything when that isn't the behavior you want.

  Marked as helpful

  1
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.

  • Your heading elements <h1><h6>Missing 2 3 4 5, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.

  • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.

        <div class="link">
         <a class="mint" href="https://github.com/rawatdinesh10">GitHub</a>
          <a class="mint" href="https://www.frontendmentor.io/profile/rawatdinesh10">Frontend Mentor</a>
          <a class="mint" href="https://linkedin.com/in/rawatdinesh33">LinkedIn</a>
         <a class="mint" href="https://x.com/dineshrawat325"> Twitter</a>
          <a class="mint" href="https://www.instagram.com/rawatdinesh333">Instagram</a>
        </div>
  

  • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

  • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

  • For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable.

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  1

  ---

  

  rawatdinesh10•30

  @rawatdinesh10Posted 2 months ago

  @Stroudy Thank you so much for such a great explanation and solution of the challenge. I'm going to follow each step mentioned above. Thanks a lot.

  0

  

  rawatdinesh10•30

  @rawatdinesh10Posted 2 months ago

  @Stroudy Please help me in sizing the img. How should I size my img in the challenge to design file img?

  1

  

  rawatdinesh10•30

  @rawatdinesh10Posted 2 months ago

  @Stroudy I have made changes in my code according to your instructions but now I'm stuck in centering the a tags in the container, I have used @font-face rule too but fonts are not applying to the page. Please help

  0

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  @rawatdinesh10, Use google dev tools to help you figure out what is effecting the element, Without taking a look it is hard for me to help you, When you have the fonts in the fonts folder make sure it is correctly path ./fonts etc maby watch a YouTube video explaining it, Once you know it, It does become easy.

  Marked as helpful

  0

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  @rawatdinesh10, I got some time now if you want some more help message me on frontend mentor discord or tag me stroudyhd

  0
• 

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  If you want to make your card responsive with ease you can use this technique:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  1

  ---

  

  rawatdinesh10•30

  @rawatdinesh10Posted 2 months ago

  @MikDra1 should i use 'container' class on parent body element?

  0

  

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  @rawatdinesh10

  It's up to you. For me it's just cleaner 😁

  0

  

  rawatdinesh10•30

  @rawatdinesh10Posted 2 months ago

  @MikDra1 i have already used container class on div element which is the container for all the items within it. Please let me know where to use grid.display, justify, align, grid-template-column etc. properties? On grid div container element or parent body element? Please explain?

  0

  

  MikDra1•6,980

  @MikDra1Posted 2 months ago

  @rawatdinesh10

  If you want to use the .container then you should create another "div" element and add all the styles that are specified. If you want to add these styles to the "body" tag that's up to you. 😀

  0