Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change size of Gallery Overview on Mobile


Ptphotography

Question

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 post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Some pages on mobile seems long. You should consider adding a back to top button Do you want to align these pagination on mobile?

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,

Posted Images

6 answers to this question

Recommended Posts

  • 1

Add to Page Header

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

 

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 1

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

You can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 1

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 can send your question to my email to get faster answer.

How to:

-- I'm off in Lunar New Year. Will take 3-7 days to you get the answer on Forum.

Link to post
  • 0
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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...