-
AuthorPosts
-
November 18, 2019 at 2:59 pm #1157895
Hi,
I placed a masonry section on this page (see private)
The strange thing is that in on the Google Chrome browser there is a darkgrey border between the images, see screenshot
It doesn’t show on FireFox or Edge.
How do I get rid of this?I use a child-theme
thanks in advance,
KarinNovember 19, 2019 at 9:16 am #1158060Hey Karin,
Please try the following in Quick CSS under Enfold->General Styling:
.avia-chrome .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry { top: 1px !important; }
Best regards,
RikardNovember 19, 2019 at 12:11 pm #1158117Hi Rikard,
Thanks, but it doesn’t disappear.
I noticed that it does disappear when I deactivate the “Animation on load”. I guess it has something to do with that?best regards,
KarinNovember 19, 2019 at 7:28 pm #1158254Hi,
I’m not seeing any grey borders at all. Is this with a certain device or screen size? Or, has this been resolved?
Best regards,
Jordan ShannonNovember 19, 2019 at 8:40 pm #1158274hi Jordan,
That’s because I deactivated the “Animation on load” in the masonry settings. When it is activated the grey borders appear in Google Chrome.I don’t mind to deactivate the “Animation on load”, but in case you want to see it, it’s on now :-)
(Currently the page is not added to the menu or linked to, so visitors will not see it yet.)Thanks,
KarinNovember 19, 2019 at 11:05 pm #1158306Hi,
Add this to quick css:
.main_color .av-masonry-outerimage-container{ background-color:none!important; }
Best regards,
Jordan ShannonNovember 20, 2019 at 1:11 pm #1158454hi Jordan,
Unfortunately that doesn’t work either. For testing purposes I changed the color in your code from “none” to “ff0000” and as you will see the darkgreyborders are still there. When you hover over an item this border disappears and you will see in a tiny fraction some red (“ff0000”), so it is not the section that needs adjusting.
Again: it only occurs in Google Chrome and when the Masonry block has the option “Animation on load” activated.thanks,
KarinNovember 21, 2019 at 6:33 am #1158713Hi Karin,
It works when I check in Chrome if I combine this CSS:
.main_color .av-masonry-outerimage-container { background-color: transparent !important; }
With what I previously posted. I couldn’t see the first CSS I posted applying though, did you take it out?
Best regards,
RikardNovember 21, 2019 at 11:02 am #1158777Hi Rikard,
I did several combinations:
I combined the first:
.avia-chrome .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
top: 1px !important;
}with with one I received from Jordan:
.main_color .av-masonry-outerimage-container{
background-color:none!important;
}
But that didn’t work, and then I tried the last one without the first one, to no avail.
Currently these two CSS are added to the quick CSS:.avia-chrome .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry {
top: 1px !important;
}
.main_color .av-masonry-outerimage-container {
background-color: transparent !important;
}But as you see the grey border still persists.
UPDATE I just checked a similar page, but there the greyborder are not visible. I’ll check what’s different.
thanks,
Karin- This reply was modified 4 years, 12 months ago by karinorage.
November 21, 2019 at 8:10 pm #1158932hi Rikard.
Okay, this is a mystery.
First of all: the CSS didn’t work.Here is the mystery I found, text above the masonry seems to cause the appearance of the greyborder in Chrome.
When the textblock consists of 1 or 3 paragraphs the borders are visible.
When it consists of 2 paragraphs or more than 3 the borders are not visible.
Isn’t that weird?
I made some testpages with identical blocks, but different in amount of paragraphs ( see details in private content):
one-paragraph/ border
wo-paragraphs/ no border
three-paragraphs/ borderAnd I added you to the dasboard ( see details in private content) so you can see for yourself.
For the time being I will deactivate the “Animation on load” on the original pages, because they have to appear for public this week.
thanks,
KarinNovember 26, 2019 at 2:12 am #1160150Hi,
Thank you for the update.
We don’t really see the borders between the Masonry items in Chrome on Windows 10, and the current layout of the element looks different compare to the initial screenshot. Did you increase the space or gap between the items? Please check the screenshot below.
Screenshot: https://imgur.com/a/UI4CIVT
Best regards,
IsmaelNovember 26, 2019 at 10:59 am #1160247This reply has been marked as private.November 27, 2019 at 3:47 am #1160552Hi,
you manage to send me back the example of which I said that there it does not occur.
Sorry about that. We still however don’t see the issue on the other two pages where the border should occur. Please check the screenshots below:
one-paragraph: https://imgur.com/a/EFpDCHr
three-paragraph: https://imgur.com/a/6CyZG4TThose screenshots are from Chrome Windows 10.
Thank you for your patience.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.