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

Adjust layout of summary block for smaller screen

Question

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

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

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


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
  • 0

Can you describe in detail "grid"?


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
  • 0

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

Share this post


Link to post
  • 0
@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


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
  • 0
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?


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

Create an account or sign in to comment

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


×
×
  • Create New...