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

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 - Free Templates - Free Code - CSS ID List

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...