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

Force Summary Block to 3 thumbnails per row for mobile


junger

Question

Recommended Posts

  • 1

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 1
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;
}
}

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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%

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 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.

 

Link to comment
  • 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
Link to comment
  • 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?

Link to comment
  • 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
Link to comment
  • 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.

Link to comment
  • 0

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

 

 

 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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! 

Screen Shot 2020-05-16 at 11.04.03 PM.png

Edited by sarahlavie
add more info
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
17 hours ago, sarahlavie 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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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? 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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!

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...