Summary Block extending past the of width of site

SqSp 7.1 — Summary Block

I've added a few summary blocks to the home page of a site which are working as expected. However…

• The problem is that on tablets and smartphones the blocks run off the right side of the width of the site. And, even on desktop when the browser window is not super-extended. The blocks do not resize to stay within the page (full) margins.

• Does anyone have a quick CSS fix for this?

I'm stuck at:
.summary-block {  
    width: 100%;  <——————I know this is wrong
}

• And what happened to design settings for mobile? Do I have to write more CSS? 

Thanks.

Can you share link to page where you use Summary?

This is the site that the client insists I don't share. 

All of the other blocks are where they should be. It's just the right side of the (new) summary blocks in 7.1 that are extending outside of the page margin and the page itself! 

I can make a mock-up, but I'll have to do that a bit later. 

If standard Summary Blocks aren't being responsive on mobiles and tablets, I suggest picking this up with Squarespace Customer Care directly. They'll already have access to the site and will be able to determine if this is a bug or something else.

Thanks Paul. 

Update:

• When I turn "Show Title" off the Summary Block stays within the page margin. 

• When I turn "Show Title" on the block runs off the page to the right…

For my meeting today with the client, I'll just turn 'Show Title' off and talk through the problem to fix later.

SOLVED: I forced the content width section width to 100%. It had been set to "L". 

Odd, but it works.

Not solved after all. It was, then jumped back to running off to the right side…

I'll deal with it over the weekend. 

Thanks!

I'm also experiencing this issue, but on my desktop with the Carousel layout. If I limit the Number of Items to <=14, it displays properly. 🤷‍♀️

On 8/28/2020 at 10:18 PM, tuanphan said:

Can you share link to page where you use Summary?

I'm experiencing this issue too! In the clients section here: https://www.kweststudio.com.au/ - have you come across a solution anywhere?

@TaitDesign & @gorillagirl79, this was solved by @bangank36 over here: 

4 hours ago, karawr said:

@TaitDesign & @gorillagirl79, this was solved by @bangank36 over here: 

 

Thank @karawr for tagging me

For clarification the way to remove the extending past the of width of site, Here is how to implement on your sites:

1. Use dev tool to inspect the section that makes your site extending.

2. Use squarespace ID Finder extension for selecting the targeted section to fix. 

3. Add to Home > Design > Custom Css

[data-sectionId#] .content-wrapper {
  min-width:0;
}

Let me know that it works properly on your sites

Support me by pressing 👍 if this useful for you

On 10/19/2021 at 3:38 PM, bangank36 said:

Thank @karawr for tagging me

For clarification the way to remove the extending past the of width of site, Here is how to implement on your sites:

1. Use dev tool to inspect the section that makes your site extending.

2. Use squarespace ID Finder extension for selecting the targeted section to fix. 

 

3. Add to Home > Design > Custom Css

[data-sectionId#] .content-wrapper {
  min-width:0;
}

Let me know that it works properly on your sites

Support me by pressing 👍 if this useful for you

Yes thank you, I fixed this using the code from your other response 🙂