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

Recommended Posts

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

}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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

 

 

 

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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%;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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!

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Yes, here is the link: frog-cylinder-fs7r.squarespace.com 

The "summary list" that I am using is on the first section underneath the hero. It is the award badge circle images.

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