Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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*

Share this post


Link to post

Add to Home > Design > Custom CSS

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

}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
Posted (edited)

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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...