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
  • Replies 6
  • Views 948
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.