Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social media card

@fluxsiarski

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What challenges did you encounter, and how did you overcome them?

Didn't know how to set size of card to be responsive and not too wide at the same time

Community feedback

geomydas 1,060

@geomydas

Posted

use max-width

1

@fluxsiarski

Posted

@geomydas But I'm still confused because I saw a solution https://github.com/oge-dev/Social-Links-Profile where the description text worked as the whole width of the card, when I removed the description, the whole card collapsed on both sides. I think this should not be the case.

Where would you recommend giving this max-width to make my card not so wide?

0
geomydas 1,060

@geomydas

Posted

@fluxsiarski I haven't read your css code yet but here is general tips but try it on your code aswell

set the max-width on the card to prevent it from growing, remove any heights you have set on the card aswell as it may overlow. don't use width for this case since it isnt responsive and likely wont resize on smaller devices.

it may also shrink if you havent set a height yet, so use a min-height aswell. you shouldn't set height but if mandatory use min-height, and not height

Marked as helpful

0
geomydas 1,060

@geomydas

Posted

Update: Read your code, what you need to change is this:

--Remove padding on the button container, that is the reason why the buttons look shitty on smaller devices

--Decrease max-width on the card container, Prev 600px, New 350px

That's really all, also I ran your code on my PC, I removed the description but it doesn't collapse

Marked as helpful

0

@fluxsiarski

Posted

@geomydas I really appreciate you took the time to check my code and give me tips on what I should change 🫶🏻 . Have a nice day

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord