Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 10, 2018 at 10:27 am #983564
    intimadecom

    Hello there!

    I’ve made a simple gallery with different image sizes.
    The images right now align to the left and top of their boxes, but i want them to be centered horizontal.
    I’m really looking forward to your help!

    Thanks in advance,
    Vincent

    • This topic was modified 6 years, 2 months ago by intimadecom.
    July 10, 2018 at 1:22 pm #983655
    Ismael

    Hey intimadecom,

    Thank you for using Enfold.

    This css code should center align the gallery items.

    #top div .avia-gallery img {
    margin: 0 auto;
    float: none;
    position: relative;
    display: block;
}

    Best regards,
    Ismael

    July 10, 2018 at 3:37 pm #983713
    intimadecom

    Thank you very very much Ismael!
    And now… One more important question, i’m desperate :|

    Is there a way to achieve that the vertical gap between the rows orientates to the largest image of the previous row?

    • This reply was modified 6 years, 2 months ago by intimadecom.
    July 10, 2018 at 5:25 pm #983747
    intimadecom

    Or alternatively – Center them also in their vertical position, as shown on that screenshot…

    Thanks in advance!

    • This reply was modified 6 years, 2 months ago by intimadecom.
    July 11, 2018 at 2:47 am #983958
    Ismael

    Hi,

    Thank you for the update.

    Use the following css code to center align the images vertically.

    #top div .avia-gallery img {
    left: 50%;
    float: none;
    position: absolute;
    display: block;
    top: 50%;
    transform: translate(-50%, -50%);
}

#top .avia-gallery .avia-gallery-thumb a {
    position: relative;
}

    Best regards,
    Ismael

    July 11, 2018 at 10:40 am #984107
    intimadecom

    Thank you soooo much, that worked out!

    The last question (hopefully) is how can I align the gallery to the horizontal center on mobile screens? See private content.

    Thank you for your great job.

    • This reply was modified 6 years, 2 months ago by intimadecom.
    July 11, 2018 at 11:43 am #984146
    intimadecom

    Problem solved! Thank you anyway! :-)

    Used this 

    .avia-gallery-thumb {
width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
    July 11, 2018 at 12:05 pm #984170
    Victoria

    Hi intimadecom,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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