Thank you all for trying here, I think I found the problem.
I was finding very strange that the problem was happening only to me (in different machines) and I also asked a few people to check and they also confirmed the problem.

Strangely, it seems it is something wrong with my nearest CDN server (Amazon Cloudfront) because if I turn a VPN to a different country, everything is fine, even on my machines. This is because I am loading the .js files in another server.

So, again, this has to be something related to the CDN. I was driving crazy here.

Thank you all for your help.

Hi @Ismael,
It’s impossible that I am the only one seeing this wrong.
It is the same in 3 different browsers (Safari, Firefox and Chrome), in 2 different machines and 2 different networks.
I also added below a screencast with a browser resizing where the buttons show in full when the screen is small, but they get cropped when it is the normal screen size on desktop.

Can someone test this on a Mac device and tell me the results to rule it out?

• This reply was modified 2 years, 10 months ago by sitesme.

Hello,

I re-enabled the CDN, and the problem is back. Can you check the homepage, the two buttons on the layerslider?

Hi Nikko,

The problem was fixed after disabling the CDN that was enabled through WP Rocket.
Everything was working perfectly fine before. Is there any compatibility with the latest Enfold version?

Hi @rikard,

This is how I see it as well in a virtual windows machine (see the screenshot in PVT). Other users confirmed as well, it is not a local problem.

I will report the layerslider problem in a new support ticket.

Thank you @Nikko, that solved the problem.

Can you help me to understand how this happens in some sites and not others? I installed a test environment and there are no problems.

I also noticed that one of your recent updates caused the logo to increase/decrease in a non-logical way (i.e. smaller screens get a huge logo, larger screens get a smaller one). Please check the video below in private. This was not happening before.

Thank you

Hello, any update please?

Unfortunately, I don’t have a staging/development version. The site is quite big to do that. Loads of huge high-quality images.

Hi @Yigit,

Just a quick update that I have removed all the code from the custom CSS box (commented out at the end) since the “damage” as it is is very minor. The code provided caused much more problems.

Please add the new code whenever you have the opportunity at the end of the CSS box so I can confirm if the problem is fixed on all devices.

Thank you.

Hi @Yigit

That code worked perfectly for mobile, but it “damaged” the whole website on desktops.
Basically, it removed all the gaps in all galleries.

My limited CSS knowledge allowed me to replace your code by the following:

@media only screen and (max-width: 767px) {
.av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry { 
     right: 0; 
}
}

This seems to have fixed 99% of the problem now. The only problem is that the gaps are gone on mobiles where they existed before. Any idea how could I fix this?

I am also very, very concerned that these particular changes might get overwritten or prioritised by a future update of Enfold. Is there a way to add all these alignments to the core enfold CSS? These are centered misalignments, not exactly custom adjustments.

Many thanks for all.

Hi @Yigit

I believe I didn’t fully fix the problem. It is still not centred.

The homepage is better than other pages. The code is working better for the homepage basically but not for the “projects” pages which are all masonry.

Please check the page below in PVT

Hi @Yigit,

Unfortunately, something went wrong on the homepage (first problem that you helped fixed).

So, I applied the first code, then replaced it by the second code and finally replaced the page masonry_entries.css

The side gaps are still not even on mobile.

Thank you

Hi @Yigit, thank you once again for your great help (as always).

This fixed the problem on that page but I also noticed the same in other pages that didn’t fix.
Please check the URL in private below.

Thank you Nikko.

The font import on Enfold is easy task, but, do I still need to load the font somewhere through CSS? I had this in the custom CSS section:

/* Custom Font Palatino */
@font-face {
  font-family: palatino-font-free;
  src: url(https://mysite.com/wp-content/uploads/avia_fonts/type_fonts/palatino-font-free/palatino.ttf);
}
body * {
font-family:"palatino-font-free" !important;
}