Jump to content

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

Recommended Posts

  • Replies 29
  • Views 6.2k
  • Created
  • Last Reply

Top Posters In This Topic

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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 4 weeks later...

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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
  • 2 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

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

Link to comment
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.

Link to comment
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?

image.png.788e0c3b1f61d4523eae3e31b07b95df.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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;

}

}

 

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.