I tried opening a ticket earlier today but instead got directed to a support hat with Waqar.
I explained my issues there and it was taking a bit to receive an answer, so I closed the page because I had to leave the office. Now I am checking and I don't seem to be able to find the ticket or any sign of the chat.
Is the support from this still ongoing or do I need to re submit the issues? Just wondering.
So, my issues are 2. In both, I see the design as I want it in the back-end, but on the front-end the design is different. As you will see in the attached images:
1. The buttons under the images should be semi-transparent with a hover effect. In the front-end the button becomes grey. The first time you load the page it might show with transparency but after some page reloads, the transparency is gone.
2. The red button should be directly under the image slider, with a small distance, but on the front-end the distance becomes huge.
If you need admin access or if something is not explained properly, please let me know.
Thank you for waiting and for sharing the admin access.
1. I noticed that your website is using a third-party caching plugin "SG Optimizer". It is generally not recommended to use more than 1 caching solution as it can result in unexpected results.
I've disabled the "Cache View" option from the view's settings and the button styles are now loading correctly, even on multiple refreshes/reloads.
( screenshot: hidden link )
2. The extra space below the slider is the result of how the Jetpack plugin loads the images dynamically.
To overcome this, you can include some custom script in the "Template for Fonts" content template's "JS editor":
( screenshot: hidden link )
jQuery(window).on('load resize', function () {
var tHeight = jQuery('.glide__slide.glide__slide--active img').height();
jQuery('ul.glide__slides').height(tHeight);
});
I hope this helps and please let me know if you need any further assistance around this.