Jump to content

Basic grid blog - switching from 3 to 2 columns at medium screen widths breaks layout (7.1)

Recommended Posts

Site URL: https://cyan-teal-3zmw.squarespace.com/blog

I'm working on making my basic grid blog switch from 3 columns to 2 columns at medium screen widths so the columns aren't absurdly narrow. I've applied the CSS that's been shared frequently in this forum, but the weirdest thing is happening — it totally breaks the layout, but ONLY on the main blog landing page. It works just fine if you navigate to a filtered view by category or tag, (e.g. https://cyan-teal-3zmw.squarespace.com/blog/category/In+The+News). Any help would be hugely appreciated! Here's the CSS I'm using for the column switch:

@media screen and (min-width:768px) and (max-width: 1024px) {
  .blog-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 40px !important;
  }
}

Site password: governance

Screen Shot 2021-04-01 at 2.31.51 PM.png

Link to comment
  • Replies 5
  • Views 1.6k
  • Created
  • Last Reply
6 hours ago, tuanphan said:

Hi. Have you solved this yet?

I actually just finally found the cause! It was the pagination links that were breaking the layout. I changed the "grid-column-end" setting on the pagination (from 4 to 3) and now it works perfectly. Here's the CSS in case it's helpful for anyone else:

@media screen and (min-width:768px) and (max-width: 1024px) {
  .blog-basic-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 40px !important;
  }
  .blog-basic-grid .blog-list-pagination {
    grid-column-end: 3 !important;
  }
}

 

Link to comment
  • 1 month later...

Hi dvgdvgdvg - sorry, a bit off-topic but please would you be willing to share:

a) How you got a title to show at the top of your blog summary

page

EDIT: I've worked out how to do this - simply adding a 'section'. I'm not sure how I missed that!

b) How you got the column to appear on the right-hand-side

I'm exploring the possibility of using the Blog function for a training resources library and both those functions would be really helpful

Many thanks, John

 

John

breathe.design

Link to comment
9 minutes ago, breathedotdesign said:

Hi dvgdvgdvg - sorry, a bit off-topic but please would you be willing to share:

a) How you got a title to show at the top of your blog summary

page

EDIT: I've worked out how to do this - simply adding a 'section'. I'm not sure how I missed that!

b) How you got the column to appear on the right-hand-side

I'm exploring the possibility of using the Blog function for a training resources library and both those functions would be really helpful

Many thanks, John

Glad you figured out the title. 🙂  The page being discussed in this forum post is not made with summary blocks though — it's a collection page, and the difference is key. On a page using summary blocks, you can build a sidebar like you would any other content: just group whatever blocks you'd like in their own column. But collection pages are more restrictive. To achieve the sidebar on my collection page (and on the blog post pages within the collection), I used this plugin from SQSP Themes. Good luck!

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.