Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 18, 2019 at 9:01 pm #1068592
    oliverrees

    Hello,

    As described in the title. When using the masonry grid, with white overlay effect activated, when the mouse hovers over the images, there is a pixel that doesn’t appear to be covered by the overlay. On chrome, this is at the bottom of the image, and on safari it is on the right hand side – I’m not sure why this is.

    Kind regards,

    Oliver

    February 20, 2019 at 8:56 am #1069311
    Ismael

    Hey Oliver,

    Thank you for using Enfold.

    Could you give us a screenshot of the issue? I can’t seem to reproduce the issue on my end. I’ve checked your portfolio page. Is that where the issue is?

    Best regards,
    Ismael

    February 20, 2019 at 5:03 pm #1069539
    oliverrees

    Ismael,

    Thank you for your email – yes it was indeed on my portfolio page.

    I have uploaded the screenshots here:

    Screenshot 1

    Screenshot 2

    (Perhaps I can see it because I have a very high resolution screen (Macbook pro retina)

    I hope this helps,

    Kind regards,

    February 22, 2019 at 3:42 am #1070174
    Ismael

    Hi,

    Thanks for the update.

    What is the native resolution of your screen?

    This css code might help.

    .page-id-160 .av-inner-masonry-content {
    min-height: 242px;
}

    Best regards,
    Ismael

    February 22, 2019 at 1:57 pm #1070327
    oliverrees

    Hello there,

    I have the resolution set to 1920 x 1200

    I have just added the code and it appears to not do anything, certainly not rectify the visual anomaly that I seem to see.

    Kind regards,

    February 25, 2019 at 7:31 am #1071149
    Ismael

    Hi,

    The css codes works but the masonry content becomes larger than the image on smaller screens. Have you tried resizing the images a bit?

    Best regards,
    Ismael

    March 1, 2019 at 11:35 am #1073053
    oliverrees

    Hello Ismael,

    What would you suggest changing the sizes to? All of the images appear to suffer the same effects, and are all different, so I can’t see how the sizes will effect this.

    Kind regards,

    Oliver

    March 4, 2019 at 4:36 am #1074119
    Ismael

    Hi,

    The size of the overlay is based on the height of its parent container, which is relative to the height of the image, so resizing the image will affect the height of the overlay. What is the original size of the images? Make sure that the size is an even integer, not odd. Or try this css code in the Quick CSS field.

    #top .av-fixed-size .av-masonry-entry.av-masonry-item-no-image .av-inner-masonry-content, #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    display: block;
}

    Best regards,
    Ismael

    March 6, 2019 at 2:00 pm #1075500
    oliverrees

    Ismael,

    Thank you very much this has worked perfectly! Very happy! :D

    *edit* just noticed one problem – now the overlay captions are appearing not centred, can this be centred once more? I assume the code above is forcing them to not be centred?

    Kind regards,

    Oliver

    • This reply was modified 5 years, 8 months ago by oliverrees.
    March 10, 2019 at 6:09 pm #1077054
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Basilis

    March 12, 2019 at 8:13 pm #1077940
    oliverrees

    Hello Basilis,

    If you note my previous comment, I made an edit – whilst it solved one problem it created another…

    The overlay captions are now appearing at the top of each image, rather than centred as before.

    I’d prefer it if they were centred, if possible?

    Kind regards,

    Oliver

    March 18, 2019 at 10:44 am #1079799
    Ismael

    Hi Oliver,

    We would like to apologize for the late response.

    This css code should center align the caption again.

    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content-pos {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content-pos-content {
    display: table-cell;
    vertical-align: middle;
}

    Just insert it right after the previous css code.

    Best regards,
    Ismael

    March 18, 2019 at 4:18 pm #1079938
    oliverrees

    Thank you Ismael.

    March 18, 2019 at 10:25 pm #1080112
    Victoria

    Hi oliverrees,

    Glad Ismael could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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