Two-Column Summary Grid in Mobile View

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!

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.

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

You are a wizard, thank you!!

Hey Ziggy, I recently noticed my two-column blog summary on mobile isn't advancing (the forward/back arrows at the top right aren't working. Do you know how to fix this?

Thanks!