Jump to content

stack columns on a tablet

Recommended Posts

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*

Link to comment
  • Replies 5
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 3 weeks later...

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>

 

Edited by IM_Design
updated info
Link to comment
  • 1 year later...
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!

Screen Shot 2022-04-09 at 6.52.26 PM.png

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.