For CSS I'm going to give some essential tips and principles for you to have a go at refactoring rather than going through line by line
- Always use a modern css reset at the start of the styles. Andy Bell has a good one you can look up and use. Be sure to read his post(s) about it properly to understand what it is and why it includes what it does
- Never declare font sizes in px
- Remove all heights and widths in this (min height is fine on the body). Never limit the height of elements that contain text. As developers we have to build robust solutions that could consume content of a different length if editors change it, or different default font sizes which many many people change
- Most components, this includes, only need a max-width in rem, no widths
- Correct colors are provided in the style guide. The text must be readable
- Not everything needs to be flex. Only use flex very intentionally
- Line height should be set with a unitless value eg 1.5. Don't rely on keywords that can differ between browsers.
- Text align is inherited if placed on elements higher in the DOM
- give the component a little margin or the body a little padding to prevent the component from ever hitting screen edges
- There is no need for any media query on this challenge. You will need them on future challenges so it's worth reading about how to use media queries well
Marked as helpful
This is much better now
You've still not Included the modern css reset. Although that isn't causing problems in this specific challenge it will cause problems in future challenges. No real-world project would miss a reset so get into the habit of adding it now
Reminder:
You're also using custom properties in an unusual way here. Custom properties are overwritable, they are designed to be changed in some contexts, ie values changed for certain components or values changed site wide based off a user action like toggling a theme change. You would naver name custom properties with values within them like "--margin-bottom-10px"
. A more usual name would be something like --spacer-small
You are also setting margin bottom on elements to 0 on line 27 (unnecessary anyway) then setting it again on lines 67 and 74. This is confusing.
The last warning is about using element selectors. When coding single components like this, still think about a whole website. Because you've used element selectors for paragraph and the heading, these styles would affect everywhere in the site. It is good practice to only use single class selectors in css after the Reset for component styles. This ensures they only affect the components you want to, and it keeps css specificity low