Social Link Profile

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @Imerzion, congrats your project is very similar to proposed design.

  I have some tips regarding your CSS. I noticed that in your card, you used min-width: 375px, which can cause your project to look odd on screens with a width of 320px. My strongest recommendation here would be to use minimum values smaller than 320px. But my strongest recommendation regarding this is to use width: clamp(), in clamp() we can pass 3 values, like this clamp(minValue, baseValue, maxValue), so you could use it like this: width: clamp(240px, 100%, 425px) (hypothetical values).

  In the .social_upper, section, instead of using flex, you could simply use text-align: center; which would reduce the size of your selector and make it clearer. Note: text-align only works here because all elements within are inline.

  In your .social_upper img , section, the property background-size: cover; has no effect because it only works with elements that have a background-image. Since you used an <img />, tag, it would be more correct to use width, height and object-fit: cover;.

  Now, a small tip regarding your HTML: it would be more appropriate to use an <a>, tag for buttons, as they serve as a means to access another page.

  Once again, congratulations on your project! It's very well done and closely matches the proposed design. Keep practicing and improving. If anything I've said isn't clear, please comment below, and I'll try to help as best as I can.

  Marked as helpful

  1

  ---

  

  Imerzion•120

  @ImerzionPosted 7 months ago

  @R3ygoski,

  Thanks so much for the constructive feedback, I really appreciate it. For sure, declaring widths is not my strong suit at the moment and I am struggling with it a little bit to be honest. I'll keep the information that you've provided at hand.

  I did realise that it didn't scale down correctly to mobile devices, I was going to add a media query to rectify that, but decided to learn from my mistake and move onto another project which was a little bit beefier.

  Also, thanks for the additional pointers with the .social_upper and in regards to the img I do struggle a little bit when it comes to styling up the image, so will also make note of your comments in regards to that, I appreciate the feedback!

  Completely aware of adding <a> tags to the buttons, I was just a little bit lazy as they weren't linking anywhere anyway haha!

  Thanks for the kind words and once again for the feedback, REALLY appreciate it!

  Take care and have a pleasant weekend!

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  BODY MEASUREMENTS 📐:

  • I want to address that you're currently added overflow: hidden which will cause the entire component to cutt-off on some devices just like using height: 100vh.

  ---

  • Additionally, You want to use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens, such as mobile devices in landscape orientation

  ---

  • For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

  ---

  • But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  1

  ---

  

  Imerzion•120

  @ImerzionPosted 7 months ago

  @0xabdulkhalid

  Thanks so much for the super helpful information. Will make note and I’ll ensure to use your suggestions going forward! Everything you stated completely makes sense.

  I have a question if you have time regarding something that I am having difficulty with.

  When it comes to styling up my projects I’m having a little trouble when it comes to declaring element widths. Is it generally seen as good practice to manually declare widths of elements?

  I’m referring to selectors such as containers and images. I am constantly second guessing myself manually adding widths and heights. Is this something that I should be doing and if so, have you any advice when it comes to declaring the correct proportions?

  Kind regards,

  ~ Imerzion

  0