Adjust layout of summary block for smaller screen

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!

Have you solved this yet? If no, I can take a look.

Hello. No I haven't solved it. 

I think basically what I need is the layout of the Projects block to change from "list" to "grid" when it's being viewed on mobile.

Any help you could give me on that wold be greatly appreciated.

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

Can you describe in detail "grid"?

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

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.

At the moment it looks like this

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

That looks perfect! Thank you!!

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? 

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?

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!

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!

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

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

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

Hi,

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

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

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

Thank you so much!