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

Hey @tuanphan, I would love your help!

A client wants to have Gallery type Simple Grid with 3 rows across on desktop, but only 1 row across on mobile - is that possible? Or, is there a different way? I have some code below that I found somewhere else - that might work? not sure.

my URL is: www.shannonborg.com

the site I'm working on is www.bethkehoe.com - here are the two pages: 

https://www.bethkehoe.com/artwork/figure-paintings

https://www.bethkehoe.com/artwork/landscape

Will any of this code work?

Thank you!
Shannon

/* Mobile Screens Only */

@media only screen and (max-width: 640px) {

  CODE GOES HERE

}

/* Tablet Screens Only */

@media only screen and (min-width: 641px) and (max-width:950px) {

  CODE GOES HERE

}

/* Desktop Screens Only */

@media only screen and (min-width: 951px) {

  CODE GOES HERE

}

/* fullsize product image */

@media screen and (max-width:767px) {

img.ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

}

}

On 12/8/2023 at 2:34 AM, shannonborg said:

Hey @tuanphan, I would love your help!

A client wants to have Gallery type Simple Grid with 3 rows across on desktop, but only 1 row across on mobile - is that possible? Or, is there a different way? I have some code below that I found somewhere else - that might work? not sure.

my URL is: www.shannonborg.com

the site I'm working on is www.bethkehoe.com - here are the two pages: 

https://www.bethkehoe.com/artwork/figure-paintings

https://www.bethkehoe.com/artwork/landscape

Will any of this code work?

Thank you!
Shannon

 

/* Mobile Screens Only */

@media only screen and (max-width: 640px) {

  CODE GOES HERE

}

/* Tablet Screens Only */

@media only screen and (min-width: 641px) and (max-width:950px) {

  CODE GOES HERE

}

/* Desktop Screens Only */

@media only screen and (min-width: 951px) {

  CODE GOES HERE

}

/* fullsize product image */

@media screen and (max-width:767px) {

img.ProductItem-gallery-slides-item-image {

    object-fit: contain !important;

}

}

 

Use this CSS code to change Grid 3 to Grid 1 on mobile

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

Oh thank you SO much! I really appreciate it!

shannon

Hello I have a Slideshow Reel on my "Clutch Media" page. I need the height on desktop to be 99 but the height on mobile to be 35. This ensure the photos don't get cut off. My page link is https://www.vclutch.com/clutchmedia . I need CSS for the slideshow reel on the page please. Thanks for the help in advance!

Hello I have a Slideshow Reel on my "Clutch Media" page. I need the height on desktop to be 99 but the height on mobile to be 35. This ensure the photos don't get cut off. My page link is https://www.vclutch.com/clutchmedia . I need CSS for the slideshow reel on the page please. Thanks for the help in advance!