Design comparison
Solution retrospective
Hi all, for the first time I tried to use @media. One problem I encountered was how to remove the border radius (at the bottom of sedan and top of luxury) when it switches from full screen to mobile view. Additionally any other feedback regarding the responsive element would be helpful, as im just starting to learn this.
Additionally I set the colors as variables, thanks to some very helpful feedback. It was going well until I tried to use it on the background of the flex items(.sedan, .suv and . luxury). When I applied the var all the colors disappeared. im not quite sure what i did wrong, so any feedback would be great.
Community feedback
- @pbryan9Posted 12 months ago
Congrats on breaking into
@media
queries! It's a huge & important part of css -- you'll learn to love 'em.With regards to the border radius problem you encountered, did you know that you can set the radius for each corner independently? Usually we want to set all 4 corners the same so we use the
border-radius: 12px;
shorthand (single-value), but you can instead provide 4 values for the same property to specify each corner in clockwise order beginning from the upper left. As an example, you can sayborder-radius: 10px 0 0 10px;
to get rounded corners on the left side while keeping squared corners on the right side.I didn't dig in to prove exactly what's causing the colors-via-variables issue you described, but I do see a couple of things likely to contribute to the problem:
- When you make use of the variables, they need to be capitalized in exactly the same way as they were declared. In other words,
--Bright-orange
is not the same as--bright-orange
(call 'em what you want, but usual preference is to use the lowercase versions - these are more conventional). - When declaring the variables within the :root selector (or anywhere else really), you should end each line with a semicolon
A couple other quick notes:
- The design calls for each of the headings to be uppercase
- It looks like the body text has the default browser font instead of the specified Lexend Deca one
Good luck! CSS is a surprisingly deep language, and it can be a lot of fun.
0 - When you make use of the variables, they need to be capitalized in exactly the same way as they were declared. In other words,
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