Jump to content

Gallery in fluid engine - mobile and desktop different

Recommended Posts

This didnt used to be a problem in 7.1. I have a gallery in two columns on desktop view, in fluid engine this keeps two columns on mobile view but I would like a single column stacked on mobile and two columns on desktop. Happy to change all galleries sitewide but does anybody know how to not have tiny thumbnails on mobile? 

Screenshot 2022-11-14 at 14.53.27.png

Link to comment
5 minutes ago, ZedTeaGee said:

This didnt used to be a problem in 7.1. I have a gallery in two columns on desktop view, in fluid engine this keeps two columns on mobile view but I would like a single column stacked on mobile and two columns on desktop. Happy to change all galleries sitewide but does anybody know how to not have tiny thumbnails on mobile? 

Screenshot 2022-11-14 at 14.53.27.png

Can you share your site with the protected password so we can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, ZedTeaGee said:

Your site is private now. Please give it a protected password so we can take a look: https://recordit.co/ORy3fiWTkP

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/16/2022 at 12:11 AM, ZedTeaGee said:

Sorry, the password is Theythem 

 

Which page are you referring to? I don't see it on home/work/about page

https://aqua-cheetah-nerb.squarespace.com/about?noredirect

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

It seems you are working around with it now, right?

image.thumb.png.4a209804afdbb340744e4972509ed74d.png

It has one column now

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
12 hours ago, ZedTeaGee said:

on the duckie page (one of the projects) is a two column gallery.

 

You can try adding to Home > Design > Custom Css

section[data-section-id="635bf7a4c714825205aa20b6"] .gallery-grid-wrapper {
  grid-template-columns: 1fr !important;
}

Support me by pressing 👍  or marking as solution if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.abb73df60785d1549926a330ca6fc599.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/23/2022 at 5:59 AM, Beyondspace said:

You can try adding to Home > Design > Custom Css

section[data-section-id="635bf7a4c714825205aa20b6"] .gallery-grid-wrapper {
  grid-template-columns: 1fr !important;
}

Support me by pressing 👍  or marking as solution if this useful for you

It makes it a 1 column grid on desktop as well as mobile.  

Link to comment
On 11/24/2022 at 8:56 PM, ZedTeaGee said:

It makes it a 1 column grid on desktop as well as mobile.  

Use this code

@media screen and (max-width:767px) {
section[data-section-id="635bf7a4c714825205aa20b6"] .gallery-grid-wrapper {
  grid-template-columns: 1fr !important;
}
}

 

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
On 11/27/2022 at 12:58 PM, tuanphan said:

Use this code

@media screen and (max-width:767px) {
section[data-section-id="635bf7a4c714825205aa20b6"] .gallery-grid-wrapper {
  grid-template-columns: 1fr !important;
}
}

 

Perfect, thank you so much for your perseverance.

Link to comment
On 11/27/2022 at 12:58 PM, tuanphan said:

Use this code

@media screen and (max-width:767px) {
section[data-section-id="635bf7a4c714825205aa20b6"] .gallery-grid-wrapper {
  grid-template-columns: 1fr !important;
}
}

 

Is it possible to make this code apply to all instances of the gallery grid on the site?

Link to comment
On 12/5/2022 at 5:36 PM, ZedTeaGee said:

Is it possible to make this code apply to all instances of the gallery grid on the site?

just remove this class name

section[data-section-id="635bf7a4c714825205aa20b6"]

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.