Separate Gallery Layout for Mobile and Desktop

Hello all, 

I have a portfolio that I am currently working on and would like to have two different gallery layouts, one for desktop and one for mobile. Specifically, I would like to use Grid: Strips for the desktop version and Grid:Simple for the mobile version. I want to apply this to the sidewalk stories section of my portfolio website.

Thanks in advance to anyone who can help me out,

https://www.connorshootz.com/portfolio/sidewalkstories 

Hey @ConnorSch, you'll want to create two galleries, styling each as you wish and then hide one on desktop and one on mobile via CSS Media queries.

Actually If you want to change strips to 2 or 3 columns on mobile only, you can use this code to Website > Website Tools > Custom CSS

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

Thank you tuanphan. I'm still having an issue with the text of the buttons, on the bottom that take you to the previous and next page, overlapping. 

Also, how would I apply the custom code to different galleries on my site? Specifically for the sidewalk stories.  

On 4/8/2024 at 1:06 AM, ConnorSch said:

Thank you tuanphan. I'm still having an issue with the text of the buttons, on the bottom that take you to the previous and next page, overlapping. 

You can use this code to Custom CSS box

@media screen and (max-width:767px) {
h2.item-pagination-title {
    font-size: 16px !important;
}
}

On 4/8/2024 at 1:10 AM, ConnorSch said:

Also, how would I apply the custom code to different galleries on my site? Specifically for the sidewalk stories.  

Can you share link to some pages?

On 4/7/2024 at 3:52 AM, tuanphan said:

Actually If you want to change strips to 2 or 3 columns on mobile only, you can use this code to Website > Website Tools > Custom CSS

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

@tuanphan How would I make my images go from left-to-right, vs top-down which is what this is giving me currently?  I have only 3 columns though:


 

@media (max-width: 768px) {
    .gallery-strips .gallery-strips-wrapper {

        columns: 3;
        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 10/25/2024 at 5:52 AM, CapyCreator said:

On 4/7/2024 at 4:52 PM, tuanphan said:

Actually If you want to change strips to 2 or 3 columns on mobile only, you can use this code to Website > Website Tools > Custom CSS

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

@tuanphan How would I make my images go from left-to-right, vs top-down which is what this is giving me currently?  I have only 3 columns though:


 

@media (max-width: 768px) {
    .gallery-strips .gallery-strips-wrapper {

        columns: 3;
        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;
    }
}

 

You can share link to page where you use gallery, we can check easier