Jump to content

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

Recommended Posts

  • Replies 11
  • 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.