I spent hours combing through the forums for a solution on how to make website content stack on tablet like it does on mobile for Squarespace 7.1. Unfortunately, I never found anything that actually worked the way I wanted or needed it to. I realized that so many other people have this issue so I told myself I was going to be the one to solve it and I did. All you need is a little bit of CSS...
Please note, I'm not an expert in CSS and I didn't know how to make this occur for every page at once, so the code would need to be used repetitively for the different pages (#collections) you have.
The first part of the code is used to target what screen sizes you wish for your content to stack at or in between. You can see in my example that I am only targeting screen sizes 1px above the standard mobile breakpoint in 7.1 and up to a 1180px. If you wish to content stack at an even lager size then just increase the 1180px number in my code to a size of your own choosing. Please also be sure to update the code with your own collection id or else it will not work.
The second part is used to remove all spacers you may have used on your page. This is commonly done by default at the mobile breakpoint in 7.1. If you wish to keep your spacers then just remove this part of the code.
The final part is used to reduce the size of all images on the page. I found that without this part, most images are too large as you force the content stack. If you wish to keep all your images large then just remove this part of the code. Please note that "margin: auto;" will center you images like in my photo result. You can use left and right CSS commands to adjust this.
Here is the transformation:
In this example you will also notice I centered all the text. To do this just target the desired text class with a media query and match the "max-width" property to the value you used in the code above. Here is an example:
@media only screen and (max-width: 1180px) {
p { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h1 { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h2 { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h3 { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h4 { text-align: center; }
}
Hopefully this helps the community and works for everyone.
Question
Ognio
Hi Squarespace Friends,
I spent hours combing through the forums for a solution on how to make website content stack on tablet like it does on mobile for Squarespace 7.1. Unfortunately, I never found anything that actually worked the way I wanted or needed it to. I realized that so many other people have this issue so I told myself I was going to be the one to solve it and I did. All you need is a little bit of CSS...
Please note, I'm not an expert in CSS and I didn't know how to make this occur for every page at once, so the code would need to be used repetitively for the different pages (#collections) you have.
Here is the code:
@media screen and (min-width:768px) and (max-width:1180px) {
INSERT #COLLECTION-ID HERE .col {
width: 100%;
display: flex !important;
flex-direction: column !important;
}
.sqs-layout .sqs-block-spacer {
display: none !important;
}
.image-block {
width: 60% !important;
margin: auto;
}
}
Explanation of the code:
Here is the transformation:
In this example you will also notice I centered all the text. To do this just target the desired text class with a media query and match the "max-width" property to the value you used in the code above. Here is an example:
@media only screen and (max-width: 1180px) {
p { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h1 { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h2 { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h3 { text-align: center; }
}
@media only screen and (max-width: 1180px) {
h4 { text-align: center; }
}
Hopefully this helps the community and works for everyone.
Thanks,
Edited by OgnioBranden
Link to comment
Top Posters For This Question
1
2
Popular Days
Feb 22
2
Feb 27
1
Top Posters For This Question
tuanphan 1 post
Ognio 2 posts
Popular Days
Feb 22 2022
2 posts
Feb 27 2022
1 post
Posted Images
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment