Design comparison
Solution retrospective
Im still learning. Any feedback is helpful.
Community feedback
- @SasaVaticPosted over 3 years ago
I changed your code little bit. Lines that are under comment you don't need. Also I changed in media query min-width: 1320px to min-width: 768px because desktop view should start before. 1320px is to big resolution to start media query for desktop. Padding in .col class was too big so content was overflowing outside of screen in desktop view. Overall good job 👍. Try your code with these values and see why are things happening way they do.
body { /* margin: 50px 20px; / padding-top: 10vh; ------------------------------------> added font-size: 15px; font-family: "Lexend Deca", sans-serif; background: hsl(0, 0%, 95%); line-height: 1.6em; } .row { / display: inline-block; / padding: 20px 10px; color: hsla(0, 0%, 100%, 0.75); } @media only screen and (min-width: 768px) { .row { display: flex; justify-content: center;
margin: 0 auto; max-width: 1200px; ------------------------------------> added } .col { / width: 25%; *//* padding: 100px; */ padding: 30px;------------------------------------> added } .sedans { border-radius: 10px 0 0 10px; } .luxury { border-radius: 0 10px 10px 0; } }
Marked as helpful1@rstill06Posted over 3 years ago@ProtivProliv Thank you! I will take a look at those changes.
1
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