GrahamRoper Posted March 1 Share Posted March 1 I've added css to convert all galleries on my site from grid to stacked when viewed on mobile (see css below). Unfortunately this has created an undesired look on my mobile "about" page. How can I modify this css or add more to keep the original grid layout for only the "about" page on mobile? Thank you in advance. Page link: https://grahamroper.com/about Password: utah /* stack gallery grid on mobile */ @media only screen and (max-width: 640px) {.sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } Link to comment
Beyondspace Posted March 2 Share Posted March 2 17 hours ago, GrahamRoper said: I've added css to convert all galleries on my site from grid to stacked when viewed on mobile (see css below). Unfortunately this has created an undesired look on my mobile "about" page. How can I modify this css or add more to keep the original grid layout for only the "about" page on mobile? Thank you in advance. Page link: https://grahamroper.com/about Password: utah /* stack gallery grid on mobile */ @media only screen and (max-width: 640px) {.sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } You can change your code to this /* stack gallery grid on mobile */ @media only screen and (max-width: 640px){ #block-yui_3_17_2_1_1676869686592_8178 .sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } Support me by pressing 👍 or marking as solution if this is 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 pluginIf 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
GrahamRoper Posted March 2 Author Share Posted March 2 7 hours ago, Beyondspace said: You can change your code to this /* stack gallery grid on mobile */ @media only screen and (max-width: 640px){ #block-yui_3_17_2_1_1676869686592_8178 .sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } Support me by pressing 👍 or marking as solution if this is useful for you Unfortunately that didn't work. That changed all my mobile galleries back to grid instead of stack, EXCEPT the "about" page gallery. So basically the inverse of what I'm going for. I'm guessing you isolated the "about" page gallery block? Link to comment
Solution Beyondspace Posted March 3 Solution Share Posted March 3 16 hours ago, GrahamRoper said: Unfortunately that didn't work. That changed all my mobile galleries back to grid instead of stack, EXCEPT the "about" page gallery. So basically the inverse of what I'm going for. I'm guessing you isolated the "about" page gallery block? Ohh, it 's my bad. You can try the following one /* stack gallery grid on mobile except About page*/ @media only screen and (max-width: 640px){ body:not(#collection-63f2f994f2c62a3fadc044d3) .sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } Support me by pressing 👍 or marking as solution if this is useful for you GrahamRoper and tuanphan 2 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 pluginIf 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
GrahamRoper Posted March 10 Author Share Posted March 10 On 3/3/2023 at 8:51 AM, Beyondspace said: Ohh, it 's my bad. You can try the following one /* stack gallery grid on mobile except About page*/ @media only screen and (max-width: 640px){ body:not(#collection-63f2f994f2c62a3fadc044d3) .sqs-gallery-design-grid-slide { width: 100% !important; clear: none !important; } } Support me by pressing 👍 or marking as solution if this is useful for you That solved it. I greatly appreciate your help! Beyondspace and tuanphan 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment