Change Gallery on Mobile Version for 1 Column (7.1)

On 1/14/2023 at 3:36 AM, W75 said:

Hi! 

Can I have 2 columns on desktop and just 1 column on mobile version?  

my page:   https://www.wojtekurbanek.com/

 

Thanks so much for the help

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Thanks so much Tunaphan. It works but only on the landing page. Is there a way to apply it to the whole site?

On 1/19/2023 at 3:21 AM, W75 said:

Thanks so much Tunaphan. It works but only on the landing page. Is there a way to apply it to the whole site?

 

Remove body.homepage from the code

Hi @tuanphan I'm also hoping to apply this same 3 to 1 column on mobile for grid-simple gallery sections across my site, such as gallery sections on the page below:

https://www.pjroytaiko.org/pj-roy-story
password: FreeSpirit

Thanks so much in advance!

On 3/10/2023 at 3:05 AM, DevonLois said:

Hi @tuanphan I'm also hoping to apply this same 3 to 1 column on mobile for grid-simple gallery sections across my site, such as gallery sections on the page below:

https://www.pjroytaiko.org/pj-roy-story
password: FreeSpirit

Thanks so much in advance!

With Gallery Grid, add this to Design > Custom CSS

/* Gallery Grid 1 column mobile */
@media screen and (max-width:767px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

With Gallery Strips, Masonry, we will need another code, if you use them, please share page url, we can check easier

On 3/11/2023 at 3:17 AM, tuanphan said:

With Gallery Grid, add this to Design > Custom CSS

/* Gallery Grid 1 column mobile */
@media screen and (max-width:767px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

With Gallery Strips, Masonry, we will need another code, if you use them, please share page url, we can check easier

Thanks so much @tuanphan this is working for grid gallery sections. How can I also apply to grid gallery blocks?

https://www.pjroytaiko.org/inspired-costume-design
password: FreeSpirit

thank you thank you!

On 3/13/2023 at 12:07 AM, DevonLois said:

Thanks so much @tuanphan this is working for grid gallery sections. How can I also apply to grid gallery blocks?

https://www.pjroytaiko.org/inspired-costume-design
password: FreeSpirit

thank you thank you!

Use this code

@media screen and (max-width:767px) {
.gallery-block .slide {
    width: 100% !important;
}
}

On 2/5/2021 at 4:01 AM, tuanphan said:

Add to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

 

Hey i am new to 7.1 and when i added this code it didn't change it for me. i am not sure why it isnt working 

On 10/17/2023 at 6:15 AM, cassadee said:

Hey i am new to 7.1 and when i added this code it didn't change it for me. i am not sure why it isnt working 

 

Can you share link to page where you use gallery? This code for Gallery Masonry, maybe you used another layout