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