Jump to content

Two-Column Summary Grid in Mobile View

Go to solution Solved by Ziggy,

Recommended Posts

Site URL: https://designbycaitie.ca/blog/template

Hey there,

I'm trying to make ONE of my summary blocks (not all of them!) show up as a two-column grid on mobile view. I'm creating a blog post template to reuse indefinitely, so I don't want to use any specific block IDs that I'll have to change for every new post.

I've spent hours looking for a solution to no avail. This piece of code almost worked: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile#:~:text=The following code is used in the video. 

It achieved the two-column effect for my GRID summary, but it messed up my CAROUSEL summary directly above it by displaying ALL the summary blog posts as a grid, rather than two at a time in a carousel. 

Can someone PLEASE provide a simple code for this? Would really appreciate it!

Edited by KatieQ
Link to comment
  • Solution

Hi KatieQ can you try adding this code that I've slightly adapted from https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile

@media only screen and (max-width: 640px) {
  .summary-item-list:not(.sqs-gallery-design-carousel) {
display: flex;
flex-wrap: wrap;
}
.summary-item:not(.sqs-gallery-design-carousel) {
width: 45% !important;
margin: 4vw 2vw !important;
}
}

I've add a :not that should exclude the carousel from this code. 

If you want the code just to apply to post in that blog, you can put the CSS into the Post Blog Item Code Injection in the Blog Advanced Settings, just remember to put it within <style></style>.

Please let me know if this works and upvote, thanks!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

This worked, THANK YOU Ziggy!!!

I'm now trying to reduce the padding around that Carousel summary block on mobile. Again, I haven't been able to find exactly what I need.

Is there a way to cut off all the excerpts at the same point (perhaps ending in a "..."), and reduce the vertical padding?

Again, I don't want to use a block ID since this is a template to be reused again and again.

Screenshot 2022-09-15 123017.jpg

Edited by KatieQ
Link to comment

I'm not certain this will work correctly, I find it often needs a bit of fiddling with to get the targeting right:

@media only screen and (max-width:640px) {
  .sqs-gallery-design-carousel .sqs-gallery-design-carousel-slide * .summary-excerpt {
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
 }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

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