Change size of Gallery Overview on Mobile

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

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.

Add to Page Header

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

Thank you @tuanphan Bless you heart 🙏☺️

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

Do you want to align these pagination on mobile?

@tuanphan thank you for extending your assistance. You are the kindest and you made me so happy 😭 Please let's do whatever you think is best for our website. 

Stay safe,
K

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;
}
}

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