dvgdvgdvg Posted April 1, 2021 Share Posted April 1, 2021 (edited) 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 Edited April 5, 2021 by dvgdvgdvg Beyondspace 1 Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 Hi. Have you solved this yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Solution dvgdvgdvg Posted April 5, 2021 Author Solution Share Posted April 5, 2021 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; } } 7TK 1 Link to comment
breathedotdesign Posted May 26, 2021 Share Posted May 26, 2021 (edited) 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 Edited May 26, 2021 by breathedotdesign I solved my own problem John breathe.design Link to comment
dvgdvgdvg Posted May 26, 2021 Author Share Posted May 26, 2021 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! breathedotdesign 1 Link to comment
breathedotdesign Posted May 26, 2021 Share Posted May 26, 2021 Sorry, I got my terminology wrong - I meant 'blog collection page'. Thank you for the link to the plug in! John breathe.design Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment