Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 6, 2023 at 3:40 pm #1427357
    Stefan

    Hi,
    I have a gallery on my page. But it seems there are unnecessary spaces between the pics. This only happens on IOS, not on other devices.
    See here: https://imgur.com/a/gdpOKcH

    Any guesses?

    Thanks

    December 7, 2023 at 5:02 am #1427401
    Nikko

    Hi Stefan,

    Can you give us a link of the page shown in the screenshot?

    Best regards,
    Nikko

    December 7, 2023 at 10:02 am #1427424
    Stefan

    Home

    December 8, 2023 at 2:09 am #1427511
    Nikko

    Hi Stefan,

    Thanks for providing the link however the galleries seem to show in one column and I could not find the layout shown in the screenshot.

    Best regards,
    Nikko

    December 11, 2023 at 10:48 am #1427754
    Stefan

    On which device did you test it? It only appears on iOS

    December 13, 2023 at 2:02 am #1427925
    Nikko

    Hi Stefan,

    I checked it using an iphone, here’s the screenshot:

    Best regards,
    Nikko

    • This reply was modified 1 year, 11 months ago by Nikko.
    • This reply was modified 1 year, 11 months ago by Nikko.
    December 13, 2023 at 3:36 am #1427943
    Guenni007

    eventuell reicht schon:
    might already be enough:

    @media only screen and (max-width: 767px) {
  .avia-gallery-thumb {
    display: flex;
    flex-flow: row wrap;
    justify-content:  flex-start;  
  }
}

@media only screen and (max-width: 495px) {
  .avia-gallery-thumb a {
    flex: 1 1 100%;
    width: unset !important;
  }
}

    just change the 495px to a width you like to have the one column layout

    December 14, 2023 at 1:03 pm #1428089
    Stefan

    Its still there – I use a gallery with a large pic above and then thumbnails below:
    See here https://imgur.com/a/CtqoqxJ

    December 15, 2023 at 1:05 am #1428167
    Nikko

    Hi Stefan,

    I could see it now.
    Please try to use @Guenni007’s solution.

    Or you can also try this code and see if it helps:

    @media only screen and (max-width:767px) {
  #top .avia-gallery-thumb {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    float: none;
    width: 100%;
  }
}

    Best regards,
    Nikko

    December 15, 2023 at 8:45 am #1428183
    Stefan

    it worked! Thank you both :-)

    December 15, 2023 at 1:24 pm #1428206
    Nikko

    Hi Stefan,

    I’m glad that we could help you :)
    Thanks for using Enfold and have a great weekend!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Gallery Problems on IOS’ is closed to new replies.