Jump to content

Extending content beyond defined site width on blog posts

Go to solution Solved by sorca_marian,

Recommended Posts

Hi!

I have a summary block placed at the bottom of each blog post. It pulls in other blog posts that are related to the current one. I'm trying to get that summary block to extend nearly the full width of the site. But, right now it's confined by the blog post width. Attaching a screenshot of what I'm wanting, and here's the Site URL.

Any help would be so appreciated! 🙏

Screenshot 2024-03-08 at 11.02.45 AM.png

Link to comment

You could try this technique:

https://www.will-myers.com/articles/full-width-video-block-in-squarespace

using this class instead of the block ID: .sqs-block-summary-v2
and putting it inside <style> tags in the blog page header code injection.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Hi,

Add the below code in the Blog page settings -> Advanced -> Post Blog Item Code Injection
 

<style>
@media (min-width: 767px) {
    .sqs-block-summary-v2 {
        position: relative;
        width: 90vw;
        left: -17vw;
    }
    
    .summary-item-list {
        display : flex!important;
        gap : 20px;
    }
    
    .summary-item-list > * {
        width : 32%!important;
        margin : 0!important;
        padding : 0!important;
    }

}
</style>

 

Screenshot 2024-03-08 at 19.26.17.png

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.