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

Preview page using CSS and HTML

@mcclellangg

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Wondering what I could do to improve sizing? When I look at it on desktop, the container seems so small. Should I just make it larger?

Community feedback

Ken 935

@kenreibman

Posted

Start using rems/ems or % for sizing.

If you want your website to be more “flexible” don’t declare the height and width of your container with px. In fact, I recommend you to stray away from using px in your next project as it limits a lot of possibilities when it comes to responsiveness.

You do not need to set the width of html and body, especially because you have a .main div which is wrapping around your container declaring a width and height as well.

I noticed you trying to declare the VH in .main; a slight mistake in which you wrote 100vw for vheight, which should be 100vh.

If you rewrote your code in css for the .main div to have display:flex, justify-content:center, and align-items:center,

.main display: flex; justify-content: center; align-items: center; height: 100vh

It is a way to perfectly center the child container (.container)

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