Hiya Ryan! Great job solving this challenge. It looks really well done.
About your background colours. I noticed that you had this in index.css:
* {
margin: 0;
padding: 0;
background-color: hsl(28, 62%, 91%);
font-family: 'Overpass', sans-serif;
}
The * selector selects all your elements, so it's added a cream background colour to all your elements. You'll want to remove the background-color declaration from that block above and then instead, set your body background colour to that colour (you can do this in your index.css file). Once that's sorted, you should be able to remove all the redundant background-color declarations in your child elements/components.
Oh, and another thing. I noticed that you had CSS variables defined in index.css. You should be able to use this across your other components as well. It might be a little easier to set your colours this way instead of using the hsl() values for each element.
Hope this helped! Best of luck with other challenges! 👍
Marked as helpful
@OthankQ
Posted
@msunji Hey Marge, thank you so much for pointing that out! I had completely missed that! Also, thank you for the variable feedback as well. I will go back and refactor them! Would you have any feedback on how I structured the project using Styled Components? I still have head tilting moments when it comes to creating styled components, then importing them as a wrapper into the components I'm building and I hope I'm doing it right.
@OthankQ Heya! I think the project structure is pretty sound. I guess it does take a bit to get used to the workflow, but you'll get the hang of it, no worries!
By the way, if you're looking to read up on some more styled-components tips, you can check out these articles:
Personally, I find the first article a little easier to go through, especially if you're just starting out. The second one's got a lot of info, but it can be a lot to take in at first 😅
@OthankQ
Posted
@msunji Hey! Thank you so much for the resources I will be sure to check them out!
