Submitted 5 months ago

landing page using flexbox

Ghassen Ben Hamida•140

@rbhgaston

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

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
@enkvadratPosted 5 months ago
You can use

box-sizing: border-box;

to make the padding included in the width learn more at mdn
Marked as helpful
1
Pedro Vitor Bezerra Clemente•80
@Pedro1p0Posted 5 months ago
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

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