Skip to content
Submitted over 2 years ago

huddle-landing-page-with-single-into using flex

Najm Iqbal•60
@najjy001
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

Went full-on OCD with this one trying to make it pixel-perfect according to the design. In the end, used SASS functions to convert the pixels to VW so everything scales with the viewport width. Not sure if that is a good idea in the real world or just mad OCD any advice would be appreciated?

Community feedback

  • Account deleted

    I feel you. I was gonna use vw as well but then I found out that it breaks zooming. If you use ctrl + scroll wheel things won't change their size because they're proportional to the viewport. If you have to use vw or vh the only way to not break zooming is to use them in calc(). E.g. calc(10vw - 1px) which will calculate the amount of pixels in 10vw and subtract 1 pixel so you'll get something close to 10vw but in pixels. Though I recommend using rems instead of pixels.

    Marked as helpful
    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