JBStudio Posted October 14, 2023 Share Posted October 14, 2023 (edited) I'm looking for custom code to have my 3 image (simple) gallery on desktop stack to single images, allowing them to be full images both vertical and horizontal on mobile instead of the default of 2 columns. I found code that seems to allow for only horizontal images to display while cropping the vertical ones. You can see this on my "Interiors" tab on my site. I want all images to stack in full like my "Work in Progress" area below on my mobile site. The "work in progress" stack correctly because this is a "strips" grid. The code I currently have on my site is the follow: @media screen and (max-width:800px) { .gallery-grid-wrapper { grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 3vw !important; My site is located at www.jackbrownstudio.com Thank you! Edited October 15, 2023 by JBStudio Link to comment
tuanphan Posted October 15, 2023 Share Posted October 15, 2023 Hi, Where is Work tab? 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
JBStudio Posted October 15, 2023 Author Share Posted October 15, 2023 Sorry, it's under the "interiors" header. https://www.jackbrownstudio.com/interiors Link to comment
paul2009 Posted October 15, 2023 Share Posted October 15, 2023 Can you provide a mockup or sketch of what you are trying to achieve, and explain it in a different way? I'm confused about what you want to be able to do, and whether you are trying to make changes to the mobile view when the device is oriented in portrait or in landscape. JBStudio 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
JBStudio Posted October 15, 2023 Author Share Posted October 15, 2023 This section is correct because it shows the full image whether it's vertical or horizontal. This is in my "works in progress" which loads full images because it's a strips gallery. This is the top section of my interiors page and because it's in a grid, my default it shows 2 columns, but I used the above code to force single image but it doesn't allow vertical (portrait) image to fully load, it makes them horizontal (landscape). I'd like for all images in my interiors section to load full images, whether portrait or landscape. This is a video of how I'd like all images to load, both portrait and landscape. This is the "strips" gallery. RPReplay_Final1697382639.mov Link to comment
JBStudio Posted October 15, 2023 Author Share Posted October 15, 2023 This is the grid gallery but with the added code above, it only loads images in landscape and forces portrait images into landscape. I'd like them to fully load, no matter landscape or portrait. RPReplay_Final1697382682.mov 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