Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
junger

Force Summary Block to 3 thumbnails per row for mobile

Question

10 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 33% !important;
    position: static;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0

@tuanphan thanks, but wont that just limit the number per row?

My problem is that I don't want 2 rows on mobile, or tiny images if they're all crammed into one. So being able to limit the amount of items that are pulled would be great.

e.g let's say. 4 images on desktop, in 1 row. 2 images on mobile in 1 row.

This is something that I'm working hard to find a solution to, to implement to various block layouts. Such as the social instagram block and the product block - both on my index page.

 

Share this post


Link to post
  • 0

@JonJonJon I did this by creating multiple summary blocks with the exact number of items I wanted per row at each screen width and then showing and hiding them using media queries. But I noticed that it impacted my page speed, so I'm trying to find a better solution.

Edited by LJSpace

Share this post


Link to post
  • 0

@LJSpace That's exactly my solution so far. However it still looks like there's a  two per row maximum for mobile that I'm trying to override.  As actually 3 per row I think might look nice for this particular application. Did you find that too, did you explore a solution?

 

I haven't seen the site performance dip, perhaps because I'm using a social block?

Share this post


Link to post
  • 0

Ah, actually.. i fixed that.. just needed the old "!important"

This is code for 5 rows on everything other than mobile, where it goes down to 3.

Also so that it stretches across the site width.

(This isn't gallery block specific)

 

section#instagram .Index-page-content {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}
    .sqs-gallery-thumbnails-per-row-3 {display:none;}
    .sqs-gallery-thumbnails-per-row-5 {display:block;}


@media (max-width : 640px) {
    .sqs-gallery-thumbnails-per-row-3 {
      display:block;}
  
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-3 .sqs-gallery-design-grid-slide {
    width: 33.3333333% !important
  }
  
   .sqs-gallery-thumbnails-per-row-5 {display:none;}
}


 

Edited by JonJonJon

Share this post


Link to post
  • 0

@LJSpace

 

Came up with a solution that will keep your website quick, if you haven't gone for the plugin:

 

.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 .sqs-gallery-design-grid-slide:nth-child(n+4):nth-child(-n+5) 
  {
  display:none;
}
    .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 .sqs-gallery-design-grid-slide {
    width: (100%/3) !important;
}

 

This will turn a 5 per row gallery into a 3 per row and hid the last two.

Adjust the values according to your needs.

 

The key is to reference the block row type that you've made. in this case a 5 row. If you want to increase it up from 5, you need to make a new one. So it's best to make a block with the maximum you think, as the code can shrink the row value, but not grow

 

I had to come up with something different as the previous solutions weren't applicable to "Related Products".

Hopefully this is a more elegant solution that can be adapted to various rows/summaries/galleries.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...