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

Responsive landing page using Flexbox


Design comparison


SolutionDesign

Solution retrospective


The social icons are stretched out and I can't center the text in mobile design.

Community feedback

@KaiPereira

Posted

Nice Job Pedro! If you want the background image to fill the entire height you have to give it a height, by default body has no height so you have to give it one, I would suggest 100vh/viewport height or a fixed amount in pixels on the body, because your background image height is 100% and body has no height it will default to the background image height. Your icons are also cramped in, you can give each .btn-icon display: block and then you have to use flexbox to position the elements horizontally on the .icons/ .icon {display: flex}

Keep going and you will only get better :)

Marked as helpful

1
Naveen Gumaste 10,480

@NaveenGumaste

Posted

Hay ! Good Job PEDRO

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.

Keep up the good work!

Marked as helpful

1

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