Change Gallery on Mobile Version for 1 Column (7.1)

Site URL: https://www.buenorodrigo.com

Hello! 

Can I have 3 columns on desktop and just 1 column on mobile version? Appreciate your help! 

my page https://www.buenorodrigo.com

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

Hello @tuanphan
I had the same issue and it was partly solved following your answer. Thank you. However I would like to ask you how I can make the space between the images on the mobile view like the same gap of my shop images. Please have a look at my website. It would be great you could help me on this issue. Thank you in advance. 

https://www.kunsik.com

Mobile view
- Works

(There are no gaps between the images, I would like to fix it. Also there are no margins on the left and right side of the photos. which I would like to give the gap and margins as the Shop category photos)

- Shop

(The below attached images in the Shop category are the ideal photo display, what I would like to fix the Work category as this format)

Hi.

Q1. Q2. I don't see these images. Can you share link to exact page?

@tuanphan Hi I'm attaching the links

Please have a look at them in Mobile view. 
There is no problem with desktop view. 

Mobile view
- Works category-product page
(There are no gaps between the images, I would like to fix it. Also there are no margins on the left and right side of the photos. which I would like to give the gap and margins as the Shop category photos)
https://www.kunsik.com/works/railshelf

Mobile view
- Shop category-product page
(The below attached images in the Shop category are the ideal photo display, what I would like to fix the Work category as this format)
https://www.kunsik.com/shop/p/shelfno-redoak

Thanks in advance. 

Q1. Add to Design > Custom CSS

/* Masonry mobile */
@media screen and (max-width:767px) {
figure.gallery-masonry-item {
    margin-bottom: 10px;
}
.gallery-masonry {
    margin-left: 10px !important;
    margin-right: 10px !important;
}
}

Q2. Did you solve it?

How can I make this change for only ONE page and not all pages on my site?

I used this code from above and it worked well:

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

Hi KathieB,

If you go to Advanced on your specific page, then paste the code with <style> at the beginning and </style> at the end then it should work.

On 10/15/2021 at 5:40 AM, KathieB said:

How can I make this change for only ONE page and not all pages on my site?

I used this code from above and it worked well:

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

Follow @GLP_Films comment, or If you use Personal Plan >> Edit Page >> Add a Code Block under gallery >> Paste this code

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

@tuanphan need your help again.

How can I disable lightbox only on mobile version? 

Thanks.

17 hours ago, buenorodrigo said:

@tuanphan need your help again.

How can I disable lightbox only on mobile version? 

Thanks.

You mean homepage lightbox, when clicking on images?

https://www.buenorodrigo.com/

@tuanphan yes. 

I wanna keep the lightbox when clicking on images to open images larger on desktop version (it't already like that). But I would like to disable clicking os images on mobile version. 

On 1/10/2022 at 10:33 PM, buenorodrigo said:

@tuanphan yes. 

I wanna keep the lightbox when clicking on images to open images larger on desktop version (it't already like that). But I would like to disable clicking os images on mobile version. 

Add to Design > Custom CSS

/* Disable homepage gallery lightbox */
@media screen and (max-width:767px) {
body.homepage .gallery-masonry figure {
    pointer-events: none;
}
}

Thank you! 

I have same issue

 I want to have 3 columns (gallery page) on desktop and just 1 column (gallery page) on mobile version? In wells template 

Please help 🙂

On 4/14/2022 at 10:58 PM, dorotapo said:

I have same issue

 I want to have 3 columns (gallery page) on desktop and just 1 column (gallery page) on mobile version? In wells template 

Please help 🙂

I gave code on one of your post, you try reading all notifications

@tuanphan Sorry but I didn't find that 😞 

23 hours ago, dorotapo said:

@tuanphan Sorry but I didn't find that 😞 

Add to Design > Custom CSS

@media screen and (min-width:641px) {
div#page-62572520657d2206b026d3ff .span-4 {
    width: 33.3333% !important;
    float: left !important;
}
}
@media screen and (max-width:640px) {
div#page-62572520657d2206b026d3ff .span-4 {
    width: 100% !important;
}
}

@tuanphan

Thai you, but it doesn't work 😞 

On 4/25/2022 at 9:49 PM, dorotapo said:

@tuanphan

Thai you, but it doesn't work 😞 

Can you add & keep the code? We can check it again easier

On 4/27/2022 at 10:41 PM, dorotapo said:

@tuanphan

 https://dorotaporebska.com/new-gallery  here in gallery page I want to have 3 columns on every desktop and only one on mobile.

I don't want responsive sizing while opening gallery page on different screen.

I don't know is is possible to happen, on regular page i have as much columns as i want but i need gallery page.

I would love to have it like here:  https://beleiu.net  on every desktop and on mobile

It looks like I checked wrong site.

Saw 2 similar questions & thought that question is your.

Try adding to Design > Custom CSS

@media screen and (min-width:641px) {
div#flowItems {
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    grid-gap: 20px !important;
}
div#flowItems>article {
    margin: 0 !important;
}}

Hi @tuanphan - how could I do this with the Grid-Simple option?  So three options show on desktop but have the same three on mobile view but as a carousel?

On 6/28/2022 at 8:20 AM, emma_HCBA said:

Hi @tuanphan - how could I do this with the Grid-Simple option?  So three options show on desktop but have the same three on mobile view but as a carousel?

Can you share link to page where you use grid simple? We can check easier

@tuanphan Just wanted to say a very big thank you for the code here. I've had a couple of issues that I've wanted to resolve with one of my websites and both times I've found the solution here on the forum and both solved by you! Much appreciated. 

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