stack columns on a tablet

Site URL: https://submittolove.squarespace.com/

Hello 

I am trying to get pages where I have created columns with spacer blocks or by having images and text side by side, to stack underneath each other, they do on a mobile but on a tablet they remain in columns. I also need this for a page where I have used a summery block displaying as a grid which i would like to stack underneath each other rather then a row of 2.

These are the pages:

https://submittolove.squarespace.com/contact
https://submittolove.squarespace.com/the-team

https://submittolove.squarespace.com/projects-landing-page

This is the password to view the site as it's not live yet...

submit*

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) and (max-width:991px) {
div#page-5d821242f87e2362b7d299ac>.row>.col {
    width: 100% !important;
}

}

I was trying this out and couldn't get the page ID portion to work properly with the format above, but I was able to use this to affect my 7.1 site in general like this:

@media screen and (max-width:1000px) {
div>.row>.col {
    width: 100% !important;
 }
}

And if the page ID is added before the "div" I'm seeing it work as well like this for individual pages:

@media screen and (max-width:1000px) {
#collection-5dc4a4cd714889457f7615c2 div>.row>.col {
    width: 100% !important;
 }
}

I put the above code into the CSS Editor specifically. And I used the Chrome browser extension here to find the page ID:

Chrome Extension | Squarespace Collection/Block Identifier

You could also wrap it in <style> tags and put it in the Page Header Code Injection option as well to affect individual pages if you'd prefer this to using the ID:

<style>
  @media screen and (max-width:1000px) {
div>.row>.col {
    width: 100% !important;
 }
}
</style>

@tuanphan

I would also like the area in the screenshot to stack in tablet view so the image gallery appears below the text area. I tried the code you shared above but I couldn't figure out the div#page or maybe I was doing something else wrong?. Your coding wizardry is much appreciated!!

Website: https://pelican-elk-2p37.squarespace.com/

PW: TM2022

Danke!

10 hours ago, Chlobot said:

@tuanphan

I would also like the area in the screenshot to stack in tablet view so the image gallery appears below the text area. I tried the code you shared above but I couldn't figure out the div#page or maybe I was doing something else wrong?. Your coding wizardry is much appreciated!!

Website: https://pelican-elk-2p37.squarespace.com/

PW: TM2022

Danke!

Add to Design > Custom CSS

/* analog tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-625005f4ec265672c8deb280 .col {
    width: 100%;
}
div#page-section-625005f4ec265672c8deb280>.row {
    flex-direction: column;
}}

Thank you! This worked perfectly!! @tuanphan