Skip to content
Submitted almost 2 years ago

Reponsive landing page using Flexbox

Jeffrey Hill•100
@webdevhill
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Again I am having a discrepancy when viewing the page with Chrome's device toolbar and manually adjusting the screen width to check for responsiveness.

Things look good when using the device toolbar. It is necessary to scroll the page aon small devices. But when I manually adjust the screen width, the height of the first section does not fill the screen @768px.

If I try to fix this problem with a height: 100vh; it breaks the layout on smaller screens when using the device toolbar.

So, if this makes any sense. I can make the RWD work with the device toolbar OR by manually changing the screen's width with the dev tools. NOT both.

Please log in to post a comment

Log in with GitHub

Community feedback

  • Josh•400
    @burrijw

    Hey, nice work.

    Consider using a list for the statistics. Any time you have similarly-shaped data or UI elements, it might make sense to be in a list.

    Marked as helpful

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