I’ve been working on my product landing page:
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?
Thanks in advance!
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?
Really appreciate your input!
Just read this to better understand what auto-fill is doing.
So, in your case, by changing
auto-fit will do the trick.
Ah that’s awesome! Annoyingly, I remember a tutorial telling me that if auto-fill didn’t work, just try auto-fit!
Appreciate you taking the time to respond - thanks again.