Code to make 2 columns gallery in mobile version instead of just 1 (7.1)

Hello! 

How can I have 2 columns on mobile view instead of just 1 column? Appreciate your help! 

my site, https://www.manuelrickenbacher.com

it should look afterwords more or less like this...

Try this thread:

It doesn't work. any other ideas? appreciate 

On 1/20/2023 at 3:20 PM, Ziggy said:

Try this thread:

 

 

unfortunately it doesn't work out with my template. I found an other code in the forum (see below) - which works, but the gap between the images are way too far. has anybody an idea how to solve this ... ? really appreciate 

code:

@media(max-width:767px) {
.gallery-strips-item {
    width: 100% !important;
    position: unset !important;
    transform: unset !important; 
}

.gallery-strips-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    height: unset !important;
}

.gallery-strips-item img {
    object-fit: contain !important;
    height: 100% !important;
}
  
}
 

Add this code to Design > Custom CSS

/* Gallery strips 2 columns mobile */
@media (max-width: 576px) {
    .gallery-strips .gallery-strips-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-strips-item-wrapper {
        height: auto!important;
    }
    .gallery-strips-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-strips .gallery-strips-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}

On 1/28/2023 at 8:53 AM, tuanphan said:

Add this code to Design > Custom CSS

/* Gallery strips 2 columns mobile */
@media (max-width: 576px) {
    .gallery-strips .gallery-strips-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    .gallery-strips-item-wrapper {
        height: auto!important;
    }
    .gallery-strips-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    .gallery-strips .gallery-strips-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}

Hi Tuanphan

Thank you very much, it looks apparently perfect, but it slows down the whole page, that is not useable. It also loads first all images and put it on the left column, and then fills the right side up. It should display first picture left, second right, then third left again under the first one, and right again, and so on. May be that's why the page needs so much time to load.  And one site doesn't load at all (places).

If you have any suggestions, pleas let me know.  Thanks!

On 2/2/2023 at 10:42 PM, M-Ri84 said:

 

Hi Tuanphan

Thank you very much, it looks apparently perfect, but it slows down the whole page, that is not useable. It also loads first all images and put it on the left column, and then fills the right side up. It should display first picture left, second right, then third left again under the first one, and right again, and so on. May be that's why the page needs so much time to load.  And one site doesn't load at all (places).

If you have any suggestions, pleas let me know.  Thanks!

 

If this code doesn't work, I don't know any other ways

On 2/8/2023 at 3:32 AM, tuanphan said:

If this code doesn't work, I don't know any other ways

Hi Tuanphan

Thanks a lot for your reply. May be there is an other way to solve my problem.

Do you know a CSS injection for disabling mobile view at all? I mean, can I put the mobile breakpoint to 0px or something like that?

Thanks for your effort.

23 hours ago, M-Ri84 said:

Hi Tuanphan

Thanks a lot for your reply. May be there is an other way to solve my problem.

Do you know a CSS injection for disabling mobile view at all? I mean, can I put the mobile breakpoint to 0px or something like that?

Thanks for your effort.

Hi, no way. Each page/each section will need a different code

On 2/11/2023 at 1:08 PM, tuanphan said:

Hi, no way. Each page/each section will need a different code

okay, but thank you anyway !