Skip to content
Submitted about 2 years ago

responsive landing page with media queries and display with flexbox

Edwin Jonathan•90
@Elektrokat
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello guys, please I need a code review on this, I did not really have issues with this, but could there be a better way to do it? Thank you in anticipation.

Community feedback

  • Michael Waaler•230
    @10highPosted about 2 years ago

    Hi Edwin - nice job.

    The only thing I would comment on is that your media query on the <main> tag sets the size to be same between width 375px and 1440px. As you can see from the comparison above, this means the content remains the same size for both mobile and desktop and is therefore not responsive. Ideally, you want the smaller version to appear for mobile and the larger version to appear for desktop.

    Also: you use absolute positioning to center everything in the screen. A "better" approach is to make your <body> tag: min-height: 100vh; display: flex; justify-content: center; align-items: center;

    That will achieve the same effect, plus it would also center your footer, which is looking a little lost in the corner of the screen :)

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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