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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.