Text overlap when using block grid within tabs

Hi I’m using Foundation 6.2 css with Foundation 6.5.1 js. I know weird, but don’t ask me why I did that, it’s been 2 years.

I have callouts in a block grid inside a tab. Works great on desktop. When i first tested this on Firefox using responsive mode, there was no problem.

On cell phone, when you first open the tab, text overlaps the callouts. if I use the back arrow on my iphone, then forward again, it all looks proper.

I don’t know why this glitch occurs. Any one have helpful recommendations?

here’s the page: https://bcbuildinginspections.ca/#panel4 - condo inspections

Thanks in advance for your time.

So far I can not see the described issue. Can you provide a screenshot?

Does this also happen in a codepen?

Maybe you have to initialize Foundation in jQuery.ready.

Daniel, Thank you for replying.

I had converted the affected section to a list that is why you could not see it. It is a viable option if I cannot fix this.

Here’s the screenshot

If you see something I don’t I’d appreciate the head’s up. An other pair of eyes can’t hurt.

Since this is not my first go around with Foundation, rest assured I have initialized foundation, but I did not realize i had to initialize jquery per your suggestion; I’ll try that a little later.

The list approach may be a viable solution. If it works you can use it.
If you can provide a codepen which reproduces the issue with the previous code / markup, that would be great.