Jump to content

Summary Block extending past the of width of site

Recommended Posts

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.

Link to comment

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. 

Link to comment

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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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.

Screen Shot 2020-08-28 at 8.38.16 AM.png

Link to comment
  • 7 months later...
  • 5 months later...
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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 🙂

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.