@SasaVatic
Posted
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 helpful