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

landing page using flexbox

@rbhgaston

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?

I wanted to expand the list items (links) to fill the available width space. So i used width: 100% but it does not work: in fact the content itself takes the space but the rest of box model like the padding and margin become outside the parent element which is in this case the card element. Is there another method to to make the items take the space without having to use padding manually like I have done here ( to make the website more responsive). Thanks for your help

Community feedback

enkvadrat 20

@enkvadrat

Posted

You can use

box-sizing: border-box;

to make the padding included in the width learn more at mdn

Marked as helpful

1

@Pedro1p0

Posted

I was unable to acess your site and repository, so i dont know, how you made the page to speak about it, but to create a space between the items you could use margin-top: 10px; in the <a> </a> tag, creating a space between the items, in the second link the text ocupied more than he should and breaked the line, probabily because of the padding that you added, try again using the margin as i said, and give a feedback, but the desing its very similar to the original, congrats !

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