Jump to content

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

Recommended Posts

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

Screenshot 2021-10-15 082905.png

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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. 

image.png

Edited by JeffJ
Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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
    }
}
 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.