Force Summary Block to 3 thumbnails per row for mobile

On 10/26/2023 at 11:30 PM, jmerrill said:

Hey @tuanphan 
I have a summary block set to carousel mode on desktop and would like to increase the number of items per row from it's current max of 5 to somewhere around 8-10 items. Is this possible?

URL: http://oilandstone.co
PW: oilandstone

I see you figured it out? 

@tuanphan Well, I discovered a plugin from Will Myers that I had to purchase. But it does the job!

On 5/18/2020 at 12:28 PM, 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? 

@tuanphan hi again! I seem to be having a related issue when trying to adjust the summary blocks for mobile only on my homepage (arianajade.com) -- I adjusted the width to 50% so the image doesn't load zoomed in/wonky, but I can only produce one column with a huge amount of space on the right.

I'm trying to create this exact layout (photo below) with two columns, but each container sized a bit smaller, of course, in order to fit both columns.

I appreciate your help and wisdom!

On 1/31/2024 at 11:05 AM, arianajade said:

@tuanphan hi again! I seem to be having a related issue when trying to adjust the summary blocks for mobile only on my homepage (arianajade.com) -- I adjusted the width to 50% so the image doesn't load zoomed in/wonky, but I can only produce one column with a huge amount of space on the right.

I'm trying to create this exact layout (photo below) with two columns, but each container sized a bit smaller, of course, in order to fit both columns.

I appreciate your help and wisdom!

You need to make sure 2 items width = 100%, your code >100% so it will break down to new line

@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1618257918552_2894 .summary-item {
        width:calc(~"50% - 10px") !important;
        clear: none !important
    }

    div#block-yui_3_17_2_1_1618257918552_2894 .summary-item:nth-child(2n+1) {
        margin-right: 20px !important
    }
}