Hi Rikard,
Thanks for getting back to me. I’m using Safari 13.1.1 on a Mac. You’re right though, not seeing this in Chrome or Firefox.
I’ve attached a couple of screen grabs of a before and after so you can see what I’m seeing.

FYI – I disabled the code which stops the tile flipping, and it is still displaying low res. I checked all the theme demos and the only one using icon grid is fine in Safari – https://kriesi.at/themes/enfold-one-page-agency/

I’m going to experiment to see if I can fix it some how.

Hi Rikard,

I had to move on yesterday, but I’ve created a test page. The first video (full width layer slider) is what I went with, ideally I’d like the round play button over laying on this. The second is just the video element which I was hoping to make full width. I tried putting it into a colour section, but that wasn’t working either.

I think it needs to be obvious that it’s a video, I think a lot of people would scroll past it.

Link in private section.

Thanks for you help.

Hi Victoria,
No, I can not! I’m having a discussion with a colleague about building a new e-commerce website. He would like to use Beaver Builder, his reasons are greater visual customisation options for woocommerce. I would prefer to use Enfold, however I can not provide a counter-solution because I know he’s correct.
It was more of a general question to see if the mods/forum members knew of anything.
Thanks.

Thanks Victoria.

That’s exactly what I would’ve done, but as mentioned in a previous post, this site was designed by someone who doesn’t know Enfold, so I’ve had to bend it into shape.

Thanks for taking the time to look into it, I think what we’ve done is the best compromise, but running it past you experts gives me confirmation of that!

Hi Victoria,

My colleague added a holding page plugin. Please use the link in the private area and then use the menu to navigate.

Thanks
John

Hi again Mike,

I got chance to look in the forums today and I found an old post by Rikard here

I was able to change through CSS using

.image-overlay .image-overlay-inside:before {
  content: "\E87D"!important;
  font-family: 'entypo-fontello'!important;
}

it seems like the u is replaced by a \ and everything set to caps. Works great.
Thanks for your help!

Awesome, thanks Jordan!

Hi Ismael,

Thanks for all of your help with this – how does the page look to you now?

Thanks Ismael,

What happens if it’s not an image? A slider for instance. Can I just have
.your-custom-class { position: relative; right: -15px; }

Sorry if my question seemed stupid, it’s just I wasn’t sure if an item is tied to a particular side, such as left, so code would be:
.your-custom-class img { position: relative; left: +15px; }

I personally wouldn’t design a site like this, so I’m just trying to get as close as I can to the visuals,

Thanks again

Perfect! Thanks Vinay.

Haha – after reading back my message I realised what I’ve done wrong. I copied the whitespace element from the top of the page, which I had set no to display on medium and small screens. I just needed to turn those options off.

I feel really stupid, sometimes the answers are right in front of your nose!!!

Thanks and sorry for wasting your time!

Sorry Rikard, I’m getting my terminology confused. It’s the list of special headings I have at the very bottom of the page.
I’ve attached a screen grab of where I mean, I just want these closer together like they are on the desktop version.

Hope this makes more sense!

Hi Yigit,
Thanks for sending the link. So does this work for the \enfold\js\avia.js file? I see it mentions shortcode.js, I’ve never needed to change this file before, so I’m a bit nervous changing it, I’m guessing avia.js is a very important file!

Hello Mike.
Thanks very much for getting back to me.
The quick css works great! I did like the live search results though. I noticed, as you mention, the button still animates.
Is there any way to stop the animation without using the live search results?

If not, Is it possible to add the JS change to the child theme?
I’ve tried creating a folder called \js\ within the child theme and placing the amended file within that, and it isn’t being picked up.
I’m no expert on child themes, so any help would be much appreciated.

Thanks again,
John

Thanks Jordan, but I still don’t get it. I’ve taken a screen grab of what I am seeing, and changed the code to black and white so I can try and figure it out. This seems to be the only way I can get it to work:

#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(2) .av-inner-masonry-content {
    background:  #ffffff; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(3) .av-inner-masonry-content {
    background: #000000; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(4) .av-inner-masonry-content {
    background:  #ffffff; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(5) .av-inner-masonry-content {
    background: #000000; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(6) .av-inner-masonry-content {
    background: #ffffff; }
#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(7) .av-inner-masonry-content {
    background: #000000; }

I’ve tried changing it to:

#top .av-caption-style-overlay .av-masonry-item-with-image:first-child .av-inner-masonry-content {
    background:  #ffffff; }

And nothing is happening. It’s working as I want it to, but I want to understand why nth:child(1) or first-child isn’t working.
Is it because of the category filter?