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

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

Hi. Have you solved this yet?

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

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!

Sorry, I got my terminology wrong - I meant 'blog collection page'. Thank you for the link to the plug in!