CSS
- Always include a modern CSS reset at the start. More info here on Andy Bell’s site
- In my opinion this is a really terrible dangerous practice and you shouldn’t do it:
font-size: 62.5%;
I’ve written more about why the Rem font hack is bad - If setting max width on low level elements like headings and paragraphs, generally avoid doing that in pixels. It’s often better to use
ch
units or evenrem
so it stays responsive even when users change text size settings etc - Rather than using width in % it’s better to use max-width in rem. If you really want to use width at least use clamp() min() or max() functions so you have more control. This design is extremely narrow on my small mobile phone, leaving a lot of white space at the sides and i think this will be caused by the width 90%. It is much more common to use a re-usable wrapper class (named whatever) that sets a max width in rem, margin auto on the sides and adds a little side padding so nothing touches screen edges.
- Media queries should always be defined in rem or em. Never pixels
- You should never need to use media queries defined as min AND max width
- Never limit the height of text containing elements. All that max-height is doing is making this break and be completely inaccessible for some users. Remember, people resize their text A LOT and change the font families and increase line height and do all sorts with settings. Max height is a bad idea here
- I’m surprised you’ve not used CSS grid here. It’s an ideal challenge for it in multiple places - for example instead of the different widths all over the place, some using calc to create 3 columns, a grid with three 1fr columns and gap would create what you need. You could use grid for the whole page with its 3 distinct sections, you could use it for the reviews or ratings wrappers… worth exploring as an option.
I’m only on mobile tonight so can’t examine responsiveness fully but it definitely looks like the widths and some other items I’ve mentioned above will be causing problems.
I hope that’s all helpful