Skip to content
Submitted about 2 years ago

equalizer | grid-auto-columns, transform: translate, mobile first

Matt•130
@warehouse827
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Equalizer landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Feedback welcome!

This was a little challenging [layout shift]. Honestly, I'm not 100% happy with the breaking point transitions. I had considered using clamp() but didn't have time to mess with it.

  • mobile-first, so I used @media min-width as apposed to max-width.
  • ran HTML & CSS through validators.
  • used multiple backgrounds on the body tag.
  • bounced back and forth between flex & grid. I mostly used grid for layout [transform: translate as well].

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Matt, congratulations for your new solution!

    I did this challenge too and I know how hard is the section with the phone and the text box. So congrats for that! Hard challenge!

    If you want to make it super responsive you need to fix the behavior with the `h1 heading that not allow the container to the rest of the content (see that after 300px there's a gap in the right side)

    @media (max-width: 320px) {
.headline {
    font-size: 2rem;
}
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    0
    Matt•130
    @warehouse827Posted about 2 years ago

    @correlucas Thank you for the feedback! I'll check into that solution.

    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