Force Summary Block to 3 thumbnails per row for mobile

I am looking for a way to force summary blocks to display 3 thumbnails per row along with their excerpt for mobile screens.

Does someone know how to accomplish this?

I have the summary block on the page below:

https://www.dothingsnyc.com/journal

Thanks,
Josh

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

Is there a way to also reduce the number of items on mobile?

i.e go from 3 on desktop, to two on mobile?

On 1/12/2020 at 1:11 AM, JonJonJon said:

Is there a way to also reduce the number of items on mobile?

i.e go from 3 on desktop, to two on mobile?

change width to 50%

@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.

@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.

@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?

@JonJonJon I think I'm just going to purchase this plugin instead. I need it anyway to have a summary block gallery display more than 30 items.

from @michaeleparkour

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

@LJSpace That's a great plugin. Hopefully this thread gives others options depending on their needs. 

@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.

@tuanphan Hi Tuan - excellent code to force the summary grid to display 2 columns on mobile devices. I am trying to use the code as per below however the gap white space between the rows is massive. any idea how I can fix this please?

The code i am using: 

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

4 hours ago, msyed said:

@tuanphan Hi Tuan - excellent code to force the summary grid to display 2 columns on mobile devices. I am trying to use the code as per below however the gap white space between the rows is massive. any idea how I can fix this please?

The code i am using: 

Can you share link to page where you use summary grid?

@tuanphan Currently using the summary grid on this page: https://www.therecoverylabldn.com/drips

we have removed the code for now as our site is live. but would love to change the look on a mobile to 2 columns side by side instead of a stacked view.

thank you

On 5/8/2020 at 9:40 PM, msyed said:

@tuanphan Currently using the summary grid on this page: https://www.therecoverylabldn.com/drips

we have removed the code for now as our site is live. but would love to change the look on a mobile to 2 columns side by side instead of a stacked view.

thank you

Link doesnot exist

I am having the same issue with the massive whitespace between rows as well as no margin between the images. The Summary style I am using is "Wall" 

The code is great for reducing the Summary block rows on mobile, hoping that the column white space can be reduced as well! 

9 hours ago, sarahlavie said:

I am having the same issue with the massive whitespace between rows as well as no margin between the images. The Summary style I am using is "Wall" 

The code is great for reducing the Summary block rows on mobile, hoping that the column white space can be reduced as well! 

 

Can you share link to page in screenshot?

https://sarahlavie.com/mood

17 hours ago, sarahlavie said:

https://sarahlavie.com/mood

Add to Home > Design > Custom CSs

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1541949233230_3722 .summary-item {
    width: 49% !important;
}
div#block-yui_3_17_2_1_1541949233230_3722 .summary-item:nth-child(2n+1) {
    margin-right: 2%;
}
}

7 hours ago, tuanphan said:

Add to Home > Design > Custom CSs

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1541949233230_3722 .summary-item {
    width: 49% !important;
}
div#block-yui_3_17_2_1_1541949233230_3722 .summary-item:nth-child(2n+1) {
    margin-right: 2%;
}
}

 

Thank you for looking into it! It seems that the code works for the Summary block when it is only in the "Grid" layout not the "Wall" layout. Is there a way to force the Wall layout to be 3 across on mobile? 

20 hours ago, sarahlavie said:

Thank you for looking into it! It seems that the code works for the Summary block when it is only in the "Grid" layout not the "Wall" layout. Is there a way to force the Wall layout to be 3 across on mobile? 

Can you share link to page where you use wall layout?

https://sarahlavie.com/mood I use a gallery wall layout on this page!

7 hours ago, sarahlavie said:

https://sarahlavie.com/mood I use a gallery wall layout on this page!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5be8472a758d463fccbeb164 {
.summary-item-list {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}
.summary-item {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: static;
}
}

}

Hello, I am on 7.1 and am attempting to simply make one individual summary list switch to 2 columns on mobile. I don't want it to apply to any other summary lists but the one individual one. This is the id for it:

#block-yui_3_17_2_1_1591561826975_17505

Have tried different elements of this thread but haven't gotten it to work for me yet, thanks in advance!

9 hours ago, benjohnsoncreative said:

Hello, I am on 7.1 and am attempting to simply make one individual summary list switch to 2 columns on mobile. I don't want it to apply to any other summary lists but the one individual one. This is the id for it:

 

#block-yui_3_17_2_1_1591561826975_17505

 

Have tried different elements of this thread but haven't gotten it to work for me yet, thanks in advance!

Can you share link to page in your question?