Jump to content

Adjust layout of summary block for smaller screen

Recommended Posts

Site URL: https://sprout-tuna-swnf.squarespace.com/

I have a blog summary block on my homepage that is split 50/50 with the text on the left and image on the right.

When viewed on a tablet/mobile, I want the images to appear above the text, so they take up the full width of the screen.

I've managed to get the text to fill the width of the block, but I can't work out how to do the same for the image.

Here's what I've got so far:

@media screen and (max-width:1200px) { .summary-content.sqs-gallery-meta-container

{
    width: 100%!important;
}
}

Please help!

desktop mode.PNG

tablet mode.PNG

Link to comment

So when I add in the block using Squarspace's builder, I selected the layout as "List". layout.thumb.PNG.cc5421ccb20f2e30e76b4eeddfad7b4c.PNG

But what I really want is for it to be List for desktop/tablet, and "grid", the option next to List, for mobile, which would make it look like this.

30995183_layoutmobile.thumb.PNG.430975c739b770883ed298b7703c8d20.PNG

 

At the moment it looks like this

2114827594_layoutmobilecurrent.thumb.PNG.7ba8f0e7cce27391e2e1afe74fbbf3c3.PNG

Link to comment
@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    float: none !important;
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
}

image.thumb.png.d3f3663adbaaa8a81ee82447ca89d645.png

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
  • 2 months later...
8 hours ago, MiaMiaMia said:

I just used this for the exact same problem and it's perfect (thank you!!). I want to add padding between the text and image. @tuanphan can you advise? 

Can you share link to page in screenshot?

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
  • 10 months later...

Did anyone figure out how to add the padding between the text and the image? You can see here the text is just super close to the image, but haven't been able to figure out the code to add padding here. 

Maybe @tuanphan you have some advice?

Thanks any/everyone in advance!

Screen Shot 2021-03-31 at 7.55.19 PM.png

Edited by catemiz
Link to comment
On 4/1/2021 at 12:00 AM, catemiz said:

Did anyone figure out how to add the padding between the text and the image? You can see here the text is just super close to the image, but haven't been able to figure out the code to add padding here. 

Maybe @tuanphan you have some advice?

Thanks any/everyone in advance!

Screen Shot 2021-03-31 at 7.55.19 PM.png

Hi. Can you share link to page in screenshot? We can check easier

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
  • 7 months later...
On 11/12/2021 at 11:33 PM, MatthewW315 said:

This code helped change the layout to look better on mobile, but I am curious to know how to move the image below the title instead of above. 

I've attached an image of the preferred layout. 

https://www.workshop315.com/process-frequently-asked-question-w315-library

Troubleshoot-Grid-Layout.jpg

Hi,

No way to do this. If you want image under read more, we can give the code

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
On 11/15/2021 at 11:32 PM, MatthewW315 said:

Having the image below the read more would be a decent compromise. Could you provide that code?

Add to Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-618d3973cdd4171b14f41c16 .summary-item {
    display: flex;
    flex-direction: column-reverse;
}
}

 

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.