I am cloning google fonts and I have a minor but very annoying issue of the tiles not staying within their parent container when the screen width shrinks below 790px.
This causes the tiles to ultimately not be centered anymore.
Specifically, the right side of the child will expand about 20+ px outside of its parent element.
Here is the pen
Here is the git repo
Here is the specific section where I think the culprit lies, the ol tag/mainGrid and its related CSS:
<div class="pageContainer"> <ol class="mainGrid mgList"> <li class="tile i0 listIt light dark"> <div class="tileRow1"> <p class="tileP fType" data-tileIndex="i0"> Roboto </p> <span> <img src="img/rounded-add-button.svg" alt="use font" class="pSign"> </span> </div> <div class="tileRow2"> <p class="tileP"> Christian Robertson </p> </div> <p data-defaulttext="What if the cheap smile ate the ear? The wiggly fault can't rush the upper." class="fonText ft1"></p> </li> . . .
Feels like I have tried everything I can find to fix it, if anyone could point out what I am missing here I would really appreciate it.
Thanks in advance!