How do I arrange my code blocks side by side nicely in mobile?

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

Bump? 🙂

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632507688173_2971~.row {
    width: 50% !important;
    float: left !important;
}
}

15 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632507688173_2971~.row {
    width: 50% !important;
    float: left !important;
}
}

 

Thank you tuanphan! It does work better, but I'm not sure why the code blocks are resizing differently! Is there a way to reduce the padding between each block maybe?

I attached an image. 

Hi @tuanphan! 🙂 Sorry to bump this again, I am showing this website around next week so want to try and make this page look better. Thank you so much! 

Try removing or commenting the width lines from the following ruleset.

@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1632498127837_3987 {
        /* width:50%; */
        margin: auto
    }

    div#block-yui_3_17_2_1_1632547780119_2976 {
        /* width: 50%; */
        margin: auto
    }

    div#block-yui_3_17_2_1_1632547780119_5587 {
        /* width: 50%; */
        margin: auto
    }
}

Removing the widths doesn't seem to cause a problem with the 2 up mobile layout.

Let us know how it goes.

Thanks @creedon! Appreciate you taking the time.

What you gave me didn't work as is, but I did fiddle with it and was able to size the smaller code blocks to 81% which gets it PRETTY close to the same size as the others... but it isn't perfect depending on the viewport size you're looking at. That said, it's still way better than before. You can see for yourself here: https://www.snappi.tech/snappi-ads

I used this (through trial and error):

Quote

@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1632498127837_3987 {
        width: 81% !important;
        margin: auto
    }

    div#block-yui_3_17_2_1_1632547780119_2976 {
        width: 81% !important;
        margin: auto
    }

    div#block-yui_3_17_2_1_1632547780119_5587 {
        width: 81% !important;
        margin: auto
    }
}