Various elements are not yet in place and it’s possibly a bit more complex than it needs to be! I’ve hit a small issue but its bugging the hell out of me; the ‘sock trial’ section uses CSS Grid the line up and centre the three main elements. When I apply a new font (to the
tags), it seems to break it and results in the elements left-aligning instead of being centred.
Any ideas why changing a font would result in this? And how can I fix it?
Its because depending on font, your #trialItems grid may accommodate more then 3 <div class='trialItem'> on the page the last one being empty.
The problem is your grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
To see what i mean just change it to grid-template-columns: repeat(3, 1fr);
Thanks for replying, @sorinr! I’m not quite sure I follow - don’t really understand why changing the font would mean the grid would contain more of the
I tried changing it to grid-template-columns: repeat(3, 1fr); and that sorted it, though it now not responsive for smaller view screens. Should I incorporate a media query or is there another solution?