Jump to content

Mobile view for Gallery/ Grid

Go to solution Solved by Lesum,

Recommended Posts

  • Solution

@MaryLou Hi! You can add this code under Website > Pages > website Tools > Custom CSS to display the gallery/grid stacked for mobile view only.

@media screen and (max-width: 767px) {
#block-da41cb6d68adf52857fb .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Posted (edited)

@MaryLou Add this code to reduce the space between the images:

@media screen and (max-width: 767px) {
#block-da41cb6d68adf52857fb .slide.sqs-gallery-design-grid-slide {
    position: relative;
}
#block-da41cb6d68adf52857fb .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor {
    padding-bottom: 0 !important;
    height: 100% !important;
}
#block-da41cb6d68adf52857fb .sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
    top: unset !important;
    width: 100% !important;
    height: 100% !important;
    left: unset !important;
}
}

 

Edited by Lesum
Updated Code

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.