Skip to content
Submitted 12 months ago

Responsive Landing Page with CSS

Abdulwahab Hassan•260
@T0m0re
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Manage landing page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

One thing that always seems to confuse me is css media query. This project allowed me to use media query a lot but I hope I get to a point where I totally figure it out instead of guessing between min or max width for the page to be responsive.

Community feedback

  • Daniel 🛸•44,310
    @danielmrz-devPosted 12 months ago

    Hey @T0m0re!

    Your project looks very good!

    About media queries, I know how you feel. But I have something that helps me a lot.

    I always use the mobile first approach. Always start a project by its mobile version.

    Most projects here at Front-end Mentor have a 375px version and a 1440px version.

    So I start creating the mobile version and once it's finished, I create a media query for the desktop version: @media (min-width: 1440px) . So this helps me understand that in order to the project show me the desktop version, it needs to be at least this wide.

    Long story short, if you start by mobile version, you're gonna have to use min-width to create versions for bigger screen sizes. And if you start by desktop version, you're gonna have to use max-width to create versions for smaller screen sizes.

    I hope it helps!

    Marked as helpful
    0
    Abdulwahab Hassan•260
    @T0m0rePosted 12 months ago

    Thanks you for this, will try this approach in my next project. @danielmrz-dev

    1

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