Jump to content

Stacking Single Vertical & Horizontal Images on Mobile

Recommended Posts

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 by JBStudio
Link to comment
  • JBStudio changed the title to Stacking Single Vertical & Horizontal Images on Mobile

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

 

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. 

image.thumb.jpeg.2d1733c12f0f7c12a6ac3fe3220ea3b8.jpeg

 

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. 

image.thumb.jpeg.d951da2293ebd86ab3cf5d87493b3f98.jpeg

 

This is a video of how I'd like all images to load, both portrait and landscape. This is the "strips" gallery. 

 

 

 

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.