-
AuthorPosts
-
February 18, 2019 at 9:01 pm #1068592
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 #1069311Hey 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,
IsmaelFebruary 20, 2019 at 5:03 pm #1069539Ismael,
Thank you for your email – yes it was indeed on my portfolio page.
I have uploaded the screenshots here:
(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 #1070174Hi,
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,
IsmaelFebruary 22, 2019 at 1:57 pm #1070327Hello 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 #1071149Hi,
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,
IsmaelMarch 1, 2019 at 11:35 am #1073053Hello 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 #1074119Hi,
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,
IsmaelMarch 6, 2019 at 2:00 pm #1075500Ismael,
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, 9 months ago by oliverrees.
March 10, 2019 at 6:09 pm #1077054Hi,
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,
BasilisMarch 12, 2019 at 8:13 pm #1077940Hello 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 #1079799Hi 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,
IsmaelMarch 18, 2019 at 4:18 pm #1079938Thank you Ismael.
March 18, 2019 at 10:25 pm #1080112Hi oliverrees,
Glad Ismael could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.