Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section

Kotaro666 655

@Kotaro666-dev

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

1Hibiki1 250

@1Hibiki1

Posted

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 :)

2

Kotaro666 655

@Kotaro666-dev

Posted

Dear @1Hibiki, Thank you for sharing a useful tip! I will try your suggestion!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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