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
Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


On small screens the content is not horizontally centered. The body should be centered with flexbox but does not work.

Community feedback

P
Luciano Lima 1,290

@LucianoDLima

Posted

Hey.

The issue is you're handling the containers' widths in a weird way. For you to fix that (however you might need to do some other tweaks after, this is no definite solution), you need to:

  • Remove the max-width: 60%; from the main tag, which is in a media query.
  • Remove the width: 100% from the section class="introduction" tag, which is also in a media query
  • And finally, remove the display: block; and width: 100%; from the div class="container", which is also in a media query.

Bear in mind it is good practice to start mobile first, that way this issues wouldn't have happened cz it is harder to change from desktop to mobile sometimes. This is not a definitive solution either, some other issue might appear after you do this fix I wrote above, tho I couldn't find any from quickly looking

Marked as helpful

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