Skip to content
Submitted about 5 years ago

Four Card Feature Section

Kotaro666•655
@Kotaro666-dev
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there anyone who knows why the preview of my work on FrontEnd Mentor looks different from what it is supposed to be?

It looks like squashed from the bottom of the page as if there is some huge margin-bottom.

Code

Please log in to post a comment

Log in

Community feedback

  • 1Hibiki1•250
    @1Hibiki1

    I think the preview looks squashed because you used vh? As far as I know, what that would do is fill the height of the viewport, not more. Frontend Mentor took the screenshot of their 'preview', which has a shrunken height due to the header and stuff. Since you used vh, if you shrink the browser in height it will try to fill only that space(i.e, shrink your page in height). It's almost like it's height responsive. That may cause a lot of issues. This is how it will look on a tablet: https://drive.google.com/file/d/1_PgUXCWEJDwRw6PZBDU1t93jaSpPyLtj/view?usp=sharing

    I suggest you use '%' instead of vw and vh, and 'rem' for font size, and 'em' for margin. They work well, since they are relative to the font size. I'm not very experienced with front end yet, but those worked well for me :)

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