Blog column width on mobile using 7.1

Site URL: https://seal-trout-d665.squarespace.com/

Hi there!  I have a new SS website we've been working on and I'm having a problem with the column width of content on the blog page on mobile.  I was browsing this forum and came across some CSS code that I used to tweak the column width.  It worked but it messed something up on the home page so I reverted it.  

The test link is shared in this post and the password is "testing".  If you nav to the blog and hit mobile view, you'll see the issue.  

For reference, when I used the CSS code it screwed up the carousel "testimonials" section on the home page.

Thank you in advance!

Bryan

Blog page on mobile looks fine. Can you explain clearly?

Hi Tuan - Thanks for the reply.  

The blog probably looks ok on mobile but the problem is that the column width is not as wide as it is on other pages.  Here are two screenshots to illustrate the issue.  I found several articles on how to change the CSS code but it mucked up other parts of the site.  Trying to avoid custom coding on this site to keep things simple (if possible).  

Thanks for your help!

Bryan

You added some CSS cause this

#sections .blog-item-inner-wrapper .sqs-block:not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-gallery),.squarespace-comments {
    width: 50%;
    margin: 0 auto
}

Add this to Design > Custom CSS to override it on mobile

/* blog post width */
@media screen and (max-width:767px) {
#sections .blog-item-inner-wrapper .sqs-block:not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-gallery), .squarespace-comments {
    width: 100% !important;
    margin: 0 auto;
}
}

On 2/18/2021 at 5:58 PM, tuanphan said:

/* blog post width */ @media screen and (max-width:767px) { #sections .blog-item-inner-wrapper .sqs-block:not(.sqs-block-image):not(.sqs-block-video):not(.sqs-block-gallery), .squarespace-comments { width: 100% !important; margin: 0 auto; } }

Perfect thank you.  I had to adjust to 90% as at 100% it bled off the page.  Thank you for your help!