Site URL: https://www.snappi.tech/snappi-ads
Hi everyone!
I've made a bunch of code blocks that trigger a lightbox for some interactive content. You can see it here:
https://www.snappi.tech/snappi-ads
The problem is when in mobile, I'm unable to align them to two per row (which is way less scrolling) and for some reason, the sizes alternate. You can see in the attached image.
Here's the code I use for each block:
<center><a href="#/" data-featherlight="#snappicity-ad"data-featherlight="myiframe" data-featherlight-iframe-height="650px" data-featherlight-iframe-width="345px">
<div style="text-align:center; padding:0;">
<img src="https://www.snappi.tech/s/citytitle.jpg"></div></a>
</center>
<div style="display:none;">
<div id="snappicity-ad" style="text-align:center;">
<iframe src="https://play.snappi.tech/SnappiCity" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="650px" width="345px"></iframe>
</div>
</div>
It might look a bit messy, I'm not a web developer but I google a LOT for Squarespace code and managed to repurpose lightbox code to show an iframe. 🙂
I would like to keep the sizes consistent in mobile, as well as have two per row.
Really appreciate any and all help!
Thanks,
Jeff