Skip to content
Submitted over 4 years ago

Responsive Landing page using CSS and HTML w/ alternating blocks

camsmy•125
@camsmy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I feel frustrated that my CSS is too long here. I failed to do the footer in mobile version but it looks decent. I had fun doing this challenge. Open for critique! :)

Community feedback

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

    Great work on this challenge! Have you ever tried using min-width media queries instead of max-width? It often actually leads to less CSS code as you're only writing the more complex code once in the media queries for larger screen sizes. Whereas with max-width media queries you write the code for desktop outside the media queries and then overwrite a lot of them inside the media queries for mobile. I'd definitely recommend giving it a go, as you may well find you write less CSS.

    Your overall layout looks great on this project too, well done! As you can see by the design comparison, there are just a few small differences in font-size and some spacings.

    Let me know if you have any questions. Keep up the great work! 🙂

    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