Design comparison
Solution retrospective
Kindly give feedback for improvement
Community feedback
- @denieldenPosted almost 3 years ago
Hi Jfkay531, good job :)
Try using Flexbox, it can help you better center elements on the page: give the flexbox and
height
properties to thebody
and remove allmargin, padding and width
from the.container
class.Read the guide -> Flexbox
Note: Flexbox aligns to the size of the parent container.
You can use the
vh
measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.In the end, to make it look as close to the design as possible, for fix the top
background-image
add the propertybackground-size: contain;
I hope that helps ;)
Marked as helpful0 - @techantherePosted almost 3 years ago
Hmm.. you should probably start using flexbox, this is the perfect little course on Flexbox for you. Hope this will help solve this challenge as well. Just in case you know about flexbox but not comfortable applying try this cheatsheet on flexbox. Here is the another one Flexbox Froggy for practice.
I am sure they will help you apply those tiny changes required to make this design look good. Just apply flex box on the div with "plan" class (btw nav should not be used inside there ) and you are good to go.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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