Skip to content
Submitted 8 months ago

huddle-landing-page

Diwakhar•460
@diwakharpandyan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

Hey Guys! I have concentrated more on page responsiveness in this project. I have set media queries for multiple breakdown points like 1024px, 900px, 500px just by trial & error method...But between 2 breakdown points like 1024px & 900px if i drag the screen slider pixel by pixel, the layout gets disturbed towards the end of the next breakdown point(900px)...So, I just want to know whether writing media queries for standard screen size break points(1024,769,425) is enough or should i write media queries for every breakdown point at which the layout gets collapsed...? because the phones in landscape mode have different widths and heights than the standards...Enlighten me with the best practices...Also Pls check the responsiveness of my page and give ur valuable feedbacks... Thanks...

Community feedback

  • markus•2,250
    @markuslewinPosted 8 months ago

    Hey!

    Yes, it's usually enough to have breakpoints for the standard sizes! Usually, you start "mobile-first", and then add a @media (min-width: <tablet breakpoint>) for the tablet styles, and then add another breakpoint for desktop, if necessary.

    The image in the solution gets distorted because it's set to have width: 100% and height: 100%, which means it has to stretch to fill its parent container. If you remove height: 100%, the height can be calculated automatically from the image's width.

    You might then want to add align-items: center to the .grid-container to have the image align nicely with the text!

    Marked as helpful
    1
    Diwakhar•460
    @diwakharpandyanPosted 8 months ago

    Sure @markuslewin... That was really helpful..Thanks.. will do Mobile -first approach from the next project...

    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