@pbryan9
Posted
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 say border-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-orangeis 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.
