Jump to content

Change size of Gallery Overview on Mobile

Recommended Posts

Hello,

I hope everyone is doing well.

Please help me with the code to change the aspect ratio of my images to Lanscape/on its original size so it looks like this (after) on MOBILE. 'Before' is what it currently looks like.

Site:
https://www.ptphotography.com/mauritius-four-seasons-mauritius

1.thumb.jpg.19545950acd34907fc0f404df42f6113.jpg

Thanks in advance,

p.s the reason why I am doing this is so I can pinch-to-zoom and view the images in full size on mobile while keeping my beautiful grid gallery on desktop mode. This is the cheat I have thought about since Lightbox does not allow us to zoom the images on phone.

 

Link to comment

Add to Page Header

<style>
  @media screen and (max-width:767px) {
  .gallery-grid-item img {
    object-fit: contain !important;
}
  }
</style>

 

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

Some pages on mobile seems long. You should consider adding a back to top button

Do you want to align these pagination on mobile?

image.thumb.png.570c7536fb995267ea5f625208c06198.png

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

To add back to top, follow this guide.

With align, it looks like you added Pagination with Text Block. If you have more similar pages, each page will need different code.

With current page, add to Design > custom CSS

/* pagination side by side */
@media screen and (max-width:767px) {
div#page-section-5fcca23f83d2ac65cc0ef4da>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
div#page-section-5fcca23f83d2ac65cc0ef4da a {
    line-height: 16px;
}
}

 

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
22 hours ago, tuanphan said:

To add back to top, follow this guide.

With align, it looks like you added Pagination with Text Block. If you have more similar pages, each page will need different code.

With current page, add to Design > custom CSS




/* pagination side by side */
@media screen and (max-width:767px) {
div#page-section-5fcca23f83d2ac65cc0ef4da>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
div#page-section-5fcca23f83d2ac65cc0ef4da a {
    line-height: 16px;
}
}

 

You're a life saver, this made my day 😭🙏! You have assisted for a long time so I've learned to tweak the code to apply it to the rest of my pages.

Thank you once again. 
Stay safe and healthy always,
K

Edited by Ptphotography
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.