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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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