JBStudio Posted October 14 Share Posted October 14 (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 by JBStudio Link to comment
tuanphan Posted October 15 Share Posted October 15 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 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
JBStudio Posted October 15 Author Share Posted October 15 Sorry, it's under the "interiors" header. https://www.jackbrownstudio.com/interiors Link to comment
paul2009 Posted October 15 Share Posted October 15 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 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
JBStudio Posted October 15 Author Share Posted October 15 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 Author Share Posted October 15 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