Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 29, 2022 at 10:12 am #1363022
    tobiastoifl

    Hi,
    I have an issue on our gallery website. The horizontal gallery looks good on the desktop view but ignores settings and cutting images in the mobile view (< 768px width).

    Desktop View
    Mobile View

    My portrait images are cropped (what is absolutely not acceptable for an art gallery) and the spaces (large spaces) are gone. I know, that a portrait will look not that good on a small display, but better than cropped.

    Greets Tobias

    August 30, 2022 at 3:58 am #1363133
    Ismael

    Hey Tobias,

    Thank you for the inquiry.

    Have you tried creating a different layout for the gallery? Perhaps displaying the images separately as their own entity using an Image element, instead of displaying them as a group using a slider or horizontal gallery.

    How would you like the gallery to display on mobile view? If you want the images to fully display without overflow even on smaller screens, please use this css code.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive .av-horizontal-gallery-img {
    height: 100%;
    width: 100%;
    transform: none;
    top: 0;
    position: relative;
  }
}

    Best regards,
    Ismael

    September 1, 2022 at 12:52 pm #1363474
    tobiastoifl

    The CSS messes with the images:
    Mess

    AND I issue another problem – when I resize it to smaller width, the images get cropped on the sides to maintain the height.
    I need to ensure a format 1:3 (like the page name suggests). Any idea?

    Greets Tobias

    • This reply was modified 2 years, 3 months ago by tobiastoifl.
    September 5, 2022 at 6:56 am #1363865
    Ismael

    Hi,

    Thank you for the inquiry.

    We get the following result when we apply the code directly in the browser.

    // https://1drv.ms/u/s!AjjTfXSRbKTvxAiXmnMnMXORgNr8

    Please switch the role of the account above to admin so that we can check the modification further.

    Best regards,
    Ismael

    September 5, 2022 at 10:56 am #1363891
    tobiastoifl

    Hi, the CSS works with a computer but messes on physical mobile devices (see the screenshot).

    September 6, 2022 at 9:12 am #1364001
    Ismael

    Hi,

    We added the css code again and disabled the Performance > File Compression settings temporarily. We got this result on an iPhone simulator.

    Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvxAubyYJ8B5CPpddT?e=5gBE2o

    Best regards,
    Ismael

    September 6, 2022 at 10:26 am #1364012
    tobiastoifl

    Hi,
    unfortunately the customer claimed in the morning about the messed up pictures.
    It looks like the screenshot I already gave you.
    We used an old, a new, a small and a big iPhone with different iOS versions. Same result!

    Please check NOT on a computer – use your physical phone (maybe android or microsoft phone has the same results).

    September 6, 2022 at 2:48 pm #1364061
    Yigit

    Hey,

    I changed the code to following one and now it looks like the screenshot I shared in private content field

    
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .responsive .av-horizontal-gallery-img {
    height: 100%;
    width: auto;
    transform: none;
    top: 0;
    position: relative;
  }
}

    Could you please review your website? :)

    Best regards,
    Yigit

    September 8, 2022 at 10:18 am #1364301
    tobiastoifl

    Hi, unfortunately the Images are still not in the original ratio!
    I created a gallery with images that have a border and squares: Kriesi Squares (private access).

    As you can easily see, the ration is broken, as well as the image padding/margin is only applied to the desktop version of the gallery!
    Greets Tobias

    September 12, 2022 at 3:21 pm #1364772
    Yigit

    Hi Tobias,

    Thanks for the test page! I can see that images are a bit cut from the bottom. Is that what you mean? If so, following code seems to fix it for me

    
@media only screen and (max-width: 767px) {
.responsive .av-horizontal-gallery-img {
  height: 99%;
}}

    Could you please try adding this code and check once again?

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.