Design comparison
Solution retrospective
Couldnt get rid of the white space between the elements, stackoverflow told to use font-size at parent object and that helped a bit, but not entirely... does anyone has any suggestions for solving this?
Community feedback
- @ThedeezatPosted over 2 years ago
Hey Raymond š
Nice work on this project š
The whitespace between the containers, can be resolved using
flexbox
, you should try this out and see..container { position: relative; width: 100%; background-color: hsl(0, 0%, 95%); } .card{ height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } @media screen and (max-width: 40rem) { .card { flex-direction: column; height: initial; padding: 5rem 0; }
I decided to remove the
transform
property becauseflexbox
already align thecard
for us vertically(as long as theheight
is100vh
) and horizontally, and also remove the whitespace between them.And It's also best to remove the default
padding
andmargin
using the universal selector in your css. And also instead of usingpx
it's best to useRem
for font-size, it's a must for accessibility.* { margin: 0; padding: 0; }
Well that's all, nice work again! i hope you find this useful.
1 - @HalaszraymondPosted over 2 years ago
Awesome, thanks for the great feedback! I will try to look more into flexbox coming days!
0 - @HalaszraymondPosted over 2 years ago
Awesome!! this worked:) thankyou very much! and Im also grateful for the recommendations of learning "Flexbox" and "CSS GRID"!
0 - @GregW1994Posted over 2 years ago
Hi!
The gaps between your items is a result of a whitespace in your code - namely a line break (enter button) between divs. To get rid of it, simply remove line breaks between closing and opening tags of your <div> items. See below:
Change this: </div> <div class="suvs">
</div> <div class="luxury">
To this: </div><div class="suvs">
</div><div class="luxury">
Learning "Flexbox", and later "CSS GRID" would make creating layout for the website a lot easier. I would recommend it as a next step in your learning journey :)
0
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