Use one gallery style for desktop, a different one for mobile

I'm using a Slideshow: Simple gallery block for my desktop design, and I'd like to use a different gallery block such as Masonry for the mobile version of the site, as it allows for much larger images and simpler functionality. Is there a way to do this with custom code?

Hi,

You can add both Styles, then share link to your site, we can give code to show 1 on desktop, show another on mobile

My site is: davecooperphoto.com. The pages in question are all under this link: https://www.davecooperphoto.com/stories. For example https://www.davecooperphoto.com/stories/outliers and https://www.davecooperphoto.com/stories/blind-study use the simple gallery on desktop. I'd like to use Masonry on mobile, which I have already used custom CSS set to a single-column view so the images are large. 

Let me know what custom CSS to add so that Simple galleries on desktop are viewed as Masonry on mobile.

I hope that's clear. Thanks!

On 2/16/2023 at 11:19 PM, davecooperphoto said:

My site is: davecooperphoto.com. The pages in question are all under this link: https://www.davecooperphoto.com/stories. For example https://www.davecooperphoto.com/stories/outliers and https://www.davecooperphoto.com/stories/blind-study use the simple gallery on desktop. I'd like to use Masonry on mobile, which I have already used custom CSS set to a single-column view so the images are large. 

Let me know what custom CSS to add so that Simple galleries on desktop are viewed as Masonry on mobile.

I hope that's clear. Thanks!

I think you can add Masonry Gallery. Then we will give the code to change it to Simple Grid on desktop

I've decided to to switch the gallery style so that it looks good on both mobile and desktop. Thank you!

On 2/15/2023 at 9:01 PM, tuanphan said:

Hi,

You can add both Styles, then share link to your site, we can give code to show 1 on desktop, show another on mobile

Can I have this code?

On 3/14/2023 at 6:41 PM, ANDREASPHOTO said:

Can I have this code?

Yes. You can add then share link to your site, we can check & give the code

Hello, Can I get this code as well? https://www.tylerhorton.photography/
 

I am wanting my products to display in simple view on desktop and on wrap for mobile.

Wrap worked well for mobile, but terrible on desktop. Simple View worked great on desktop, but then greatly reduced the size of the image for desktop...

The only semi-fix I found was a code to display the entire image on mobile even while the products are in simple view, but with this code, while it displays the whole image, the image is very small.

/* fullsize product image */
@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}

Is it possible to have different settings for mobile and desktop? Thank you.

On 4/14/2023 at 1:26 PM, tylerhorton80 said:

Hello, Can I get this code as well? https://www.tylerhorton.photography/
 

I am wanting my products to display in simple view on desktop and on wrap for mobile.

Wrap worked well for mobile, but terrible on desktop. Simple View worked great on desktop, but then greatly reduced the size of the image for desktop...

The only semi-fix I found was a code to display the entire image on mobile even while the products are in simple view, but with this code, while it displays the whole image, the image is very small.

/* fullsize product image */
@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}

Is it possible to have different settings for mobile and desktop? Thank you.

Which page are you referring to?

I'm referring to all of the products...There are lots. Basically every single clickable picture under the portfolio.
https://www.tylerhorton.photography/portfolio

On 3/16/2023 at 4:49 AM, tuanphan said:

Yes. You can add then share link to your site, we can check & give the code

 Can I have this code please. I would like use a different gallery on desktop.

On 5/16/2023 at 2:37 AM, Shawnmai said:

 Can I have this code please. I would like use a different gallery on desktop.

Yes. You can add then share link to your site, we can check & give the code

Hi, I would like to use a different gallery page for my mobile site and my desktop site. Can I have the code?

I want to have a Large gallery for Desktop site and small gallery for mobile site.

https://www.kreweofsantyago.net/

Same. My photos are either too big on mobile or cut off on desktop. Can you help me out, please?

https://www.scruggsphotography.com/workshops

On 7/21/2023 at 1:29 AM, KSY said:

Hi, I would like to use a different gallery page for my mobile site and my desktop site. Can I have the code?

 

I want to have a Large gallery for Desktop site and small gallery for mobile site.

 

https://www.kreweofsantyago.net/

Hi,

I don't see small gallery. 

On 7/21/2023 at 6:52 AM, ScruggsPhotography said:

Same. My photos are either too big on mobile or cut off on desktop. Can you help me out, please?

 

https://www.scruggsphotography.com/workshops

You mean slide reel above footer?

Hi. I have used a slideshow reel gallery from client testimonials. In order for them to be read on my mobile, I need the gallery to be sized down drastically. Of course, this causes my desktop to be unreadable. I need two different gallery styles/sizes on my desktop and mobile. Can I have the code for this?

https://www.elysianhealth.org

Just now, EmmaBlevins416 said:

Hi. I have used a slideshow reel gallery from client testimonials. In order for them to be read on my mobile, I need the gallery to be sized down drastically. Of course, this causes my desktop to be unreadable. I need two different gallery styles/sizes on my desktop and mobile. Can I have the code for this?

 

https://www.elysianhealth.org

This is for both the testimonial section on the home page and the team section.

On 10/31/2023 at 9:35 PM, EmmaBlevins416 said:

Hi. I have used a slideshow reel gallery from client testimonials. In order for them to be read on my mobile, I need the gallery to be sized down drastically. Of course, this causes my desktop to be unreadable. I need two different gallery styles/sizes on my desktop and mobile. Can I have the code for this?

 

https://www.elysianhealth.org

You mean this section? or another?

Hey @tuanphan, Would love tour help, website is meant to be released tuesday.

For my homepage is it possible to have gallery type "strips" on desktop and "masonary" on mobile. My url is www.marlosuminagashi.net.

On 12/2/2023 at 7:39 AM, Marlosuminagashi said:

Hey @tuanphan, Would love tour help, website is meant to be released tuesday.

For my homepage is it possible to have gallery type "strips" on desktop and "masonary" on mobile. My url is www.marlosuminagashi.net.

You can add 2 galleries, then I will give code to show strips on desktop, and show masonry on mobile only