-
Posts
-
Hi-
We’re running into an issue with the display of a horizontal gallery when it’s viewed on a phone. It works well on a desktop, but when viewed on a phone the photos are cropped. I tried playing around with the settings but it’s not helping. My client doesn’t want me to hide the gallery when viewed on a small device, so I’m wondering if you have any suggestions. They like the way it looks on the desktop and doesn’t want any changes there. The problem is the website is password protected. Do you need to see what I’m talking about or does this description make sense? I don’t know if there’s even any other option but to hide it so I’m hoping you might have a suggestion.Thank you!
ErinHey es.design.ma,
Thank you for the inquiry.
We will need to inspect the site and the gallery to better understand the issue. Please create a test page and provide the site URL along with the login credentials in the private field.
Best regards,
IsmaelOK! I’ve created a TEST page and will add the information in the Private Content.
Thanks so much,
ErinHi,
Thank you for the info. The test page requires a password, but we couldn’t find any password settings in the page editor. We tried creating a new page and setting its status to “Private”, but it still requires a password. Where is this set?
Best regards,
IsmaelHi-
I’m having a hard time figuring out how to send you a link that doesn’t require a password. Instead I added a horizontal gallery to my own website using the same settings on my client’s website. You can see the vertical photos are cut off when displayed on a mobile view, yet when viewed on a desktop there is no cropping.For now, I’ve disabled the view of the horizontal gallery on my clients’ website when viewed on a mobile device. However she is asking if there’s anyway to display the horizontal gallery without any photos being cut off when viewed on a mobile phone.
Thanks!
Hi,
Thank you for the info.
Try adding this css code to adjust the layout of the gallery on smaller screens:
/* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 1024px) { /* Add your Mobile Styles here */ .responsive .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap { max-width: 100vw; width: 100%; height: 300px; } .responsive .av-horizontal-gallery-img { object-fit: contain; } .responsive .av-horizontal-gallery-inner { min-height: 300px; } }Result:
Best regards,
IsmaelDo I add this entire code including messages? I added all of it in custom css and I’m still seeing the third slide cropped. I don’t see the image sample you are showing.
Hi,
Please try disabling your Password Protect WordPress Lite plugin, or perhaps all of your plugins as we can’t view your page.Best regards,
MikeI noticed that everything on my website has now gotten smaller. I only need the horizontal gallery to fit properly in a mobile view however the code I added is affecting the entire site. Is there something that I’m missing? The code I inserted is:
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */@media only screen and (max-width: 1024px) {
/* Add your Mobile Styles here */
.responsive .av-horizontal-gallery-fullwidth .av-horizontal-gallery-wrap {
max-width: 100vw;
width: 100%;
height: 300px;
}.responsive .av-horizontal-gallery-img {
object-fit: contain;
}.responsive .av-horizontal-gallery-inner {
min-height: 300px;
}
}Hi,
I’m not sure what is smaller, did you click your Accessibility Tools plugin?
Try adding a screenshot on the issue, yo add a screenshot please try using an Screenshot service and pasting the image URL in your post.
The css above should only be for the horizontal gallery.Best regards,
MikeI’ve created an image without the code added and one with the code added. The one with shows the menu text is a bit smaller: https://img.savvyify.com/image/With-the-mobile-code-added.y87yl
https://img.savvyify.com/image/Without-the-mobile-code-added.y8Gd1How can I check the Accessibility Tools plugin settings?
Thanks!
- You must be logged in to reply to this topic.