Jump to content

Blog column width on mobile using 7.1

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 407
  • Created
  • Last Reply
  • 2 weeks later...

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

 

Desired column width from %22about%22 page.png

Current blog post column width.png

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.