Hi
- You should not be using max-width in %. You lose all control of the width that way. Instead, set max-width in rem. Eg 80rem for desktop, 30rem for mobile
- Media query values should always be written in either rem or em (not min-width 1024px). That is also pretty late to make the switch to the large screen view. I think there is room for the large screen layout before 1000px wide
- Instead of repeating img tags and changing their display property, just use the picture element and let the browser change the images for you! Much better for performance and less css
- The text area of the card should not be a section element. This is all one chunk of related content. You could make the whole card a section inside main if you wanted (but not necessary) but should not have section elements within the card
- Put padding on the text area of the card. You do not need any more nested divs within that half of the card
- Use a paragraph tag in this. Small is for smallprint and should only be used inside a paragraph or other element. It is not a replacement for a paragraph. This is not smallprint anyway, it is just normal text content.
- The stats should not be in a div with paragraphs. This is clearly meant to be a list of 3 stats, so use an unordered list element. Remember if you change a list to display flex and remove list-style it is necessary to restore list semantics with
role="list"
on the ul androle="listitem"
on each li - The words do not need wrapping in an emphasis tag (em). Use a span, which is meaningless, as the only reason you're wrapping them in anything is for layout purposes
- You are misusing padding in this. You should be using margin to create space between elements, like vertical margin between text elements in the card. Padding is for internal spacing and does not collapse; Marging is for external spacing and does collapse (unless used in flex-grid children, then it does not collapse)
- You should not be nesting CSS selectors like you are doing atm. You want to keep CSS specificity as low/flat as possible. That means the ideal is single class selectors at all times.
- The style guide tells you the body font size in px, but you must always convert values like that to rem before using in your stylesheet. Font-size, line-height and letter-spacing must never ever ever be in px. Very important for accessibility so users font settings can be honoured
- The paragraph text in this card should be the size defined in the style guide (it can be inherited from the body). Yours is smaller than that atm.
By the way, the Lexend Deca 400 font is used for the stats words
Marked as helpful