Skip to content
Submitted over 3 years ago

Stats Preview Landing Page (HTML, CSS)

Ryan Cahela•220
@RyanCahela
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have a feeling this will be blown way up in scale.

The style guide says the breakpoint for desktop is 1440px but I can't even view that large of a window on my laptop unless I zoom out using the browser.

Am Interpreting the 1440px wrong in the style guide?

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 3 years ago

    Hey Ryan! Nice work on this challenge. The 1440px in the style-guide.md file shows the whole width of the design as opposed to a recommended breakpoint. So it's saying that the mobile design is done at a 375px screen width, and the desktop design is 1440px screen width. So I'd recommend re-working your media query, as it could definitely change to the desktop layout earlier.

    You've done an excellent job, though! One app I'd recommend to help test responsiveness is Responsively. It's completely free and open-source and is very helpful.

    Keep up the great work! 👍

    1
    Ryan Cahela•220
    @RyanCahelaPosted over 3 years ago

    @mattstuddert thanks for the feedback Matt!

    0
  • Alejandro Baez•260
    @AlejobaezPosted over 3 years ago

    body { background-color: var(--background-color); display: grid; place-items: center; min-height: 100vh; } @media only screen (min-width:1000px){ .container { font-family: var(--inter-font-family); font-weight: var(--inter-normal-weight); width: 1000px; } }

    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