Hi,
1: what background color and image do you want to use?
2: the title is h2, what size do you want it to be?
3: you can add category images with the Categories Images plugin
Best regards,
Mike
Hi,
Try adjusting this to 27% or so:

Best regards,
Mike
Hey jhaustein,
Do you mean this on your homepage?

you had the sidebar enabled, I disabled, please clear your browser cache and check.
Best regards,
Mike
Hey Silje,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
@media only screen and (max-width: 1439px) {
.single-product .avia-svg-icon svg:first-child,.single-product .avia-svg-icon img[is-svg-img="true"] {
height: .5em;
width: .5em;
}
#top.single-product .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
margin-top: 9px;
}
#top.single-product .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top.single-product .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
width: 30px;
height: 30px;
line-height: 30px;
}
}
After applying the css, please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike
Hey Munford,
When I test your mp4 on Mac & Safari I see this error: The file isn’t compatible with QuickTime Player.


When I convert with https://video.online-convert.com/convert-to-mp4 the file then plays fine, try this.
Best regards,
Mike
Hi,
Try using the TinyPNG plugin on your large hero images, when I test one of your images on the TinyPNG site it reduced it by 40%

using smaller sized images probably would help, or using the Enfold Theme Options ▸ Preloader
Best regards,
Mike
Hi,
Do you mean like this?

try adding another column before these and add your button there. You will need to make the two PASSOVER SERVICE SCHEDULE columns smaller.
Best regards,
Mike
Hi. I need to put a video at the top of the site’s homepage, and I can’t find a solution that works on both desktop and smartphone. I’ve tried colorsection with backgroud, just the video, all types of slides. I need this video to work responsively, I don’t want to replace it with a fallback image. Does anyone have any suggestions for me?
Thank you so much!
Hi,
Videos will not show on mobile, you will need to add a fallback image, when I check you have not added a fallback image yet.
Best regards,
Mike
Hello,
after clearing the cache, the content of both sliders on the page is no longer displayed. In the header area, both the image and the caption are missing, and further down the page, only the image is not showing. The slider elements are still present in the DOM, but they appear empty.
I have completely removed all custom CSS, cleared the cache again, and haven’t changed anything else.
The issue occurs across all devices and browsers I tested: Mac, Windows PC, iPhone, and Android.
Please help me fix this as soon as possible. I urgently need a working solution.
Thank you in advance!
Best regards
https://www.neurodivergent-frank.de
Many thanks Guinne007 that works great.
I will add a fallback image but I would like it to work on mobile too. It looks great in the browser set to mobile size.
just like on :
https://kriesi.at/support/topic/add-logo-to-full-screen-slider/#post-1480358
f.e.:
(and maybe a small drop-shadow to the png
#top .avia-fullwidth-slider::after {
position: absolute;
display: block;
content: "";
width: 18vw;
height: 15.3vw;
max-width: 411px;
max-height: 349px;
min-width: 200px;
min-height: 170px;
top: 120px;
left: 80px;
background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
background-position:center center;
filter: drop-shadow(1px 1px 2px #666);
}
@media only screen and (max-width: 767px) {
#top .avia-fullwidth-slider::after {
top: 2vw;
left: 2vw;
}
}
but i see that the slider is not shown on mobile? And we had to place always a fallback image for videos?
dear mods – has this always been the case with Enfold?
It is unfortunate that we do not have the opportunity to decide for ourselves.
Hey nancyT,
I don’t have a iPhone, do you mean this:

If so try this css:
@media only screen and (max-width: 450px) {
#top #payment div.payment_box {
width: 100%;
padding: 0;
}
}
After applying the css, please clear your browser cache and check.

Best regards,
Mike
Hey Lee Germeroth,
I see that you are using v6.0.9 with a child theme.
I don’t see any errors in your console log, does your child theme have a header.php or footer.php? If so please remove.
Otherwise please update and include a admin login in the Private Content area so we can examine.
If you can’t update with your token please follow these steps:
To update you will need to download the latest installable WP version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.
Best regards,
Mike
Hey Sandra,
I’m not sure which column with the “hat” you mean, perhaps a screenshot would help.
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.
Best regards,
Mike
Hello
In the column, I would like to bring the title and the text of the hat closer to the image, reducing the gap. How can I do this?
Yes I would like it on small screens – how do I use relative width / height combinations?
This is what I changed css to to get it looking right:
#top .avia-fullwidth-slider::after {
position: absolute;
display: block;
content: "";
width: 300px;
height: 255px;
top: 50px;
left: 60px;
background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
background-repeat: no-repeat;
background-size: 300px;
background-position:center center;
background-color: rgba(0,0,0,0);
border-radius:20px;
}
Thanks
Hi,
I see an error on your page in the console log ybFun_ReplaceText is not defined I believe this is the script that you are referring to:

often a javascript error can cause other errors in javascripts, if you need this script then please ask the third party to review it as we don’t know this script.
I recommend removing it to ensure that this is the issue.
Best regards,
Mike
now we had top better find settings for relative dimension for your overlay image. …
and maybe it is better to have that only on bigger screens?
@media only screen and (min-width: 768px) {
#top .avia-fullwidth-slider::after {
position: absolute;
display: block;
content: "";
width: 18vw;
height: 15.3vw;
max-width: 300px;
max-height: 255px;
top: 80px;
left: 5vw;
background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
background-position:center center;
background-color: rgba(159, 171, 154, 0.5);
backdrop-filter: blur(4px);
border-radius:20px;
border: 2px solid #9fab9a;
}
}
and for extra large screens it might be best to have a max-width/-height
always stay the aspect ratio of your inserted image (in your case 1/0.85)
What is unclear about this?
“how to make a single image full width?”
marcus
but you did not set the custom class!
use for now – only to see that it is workiing
and f.e. better with a dark background:
#top .avia-fullwidth-slider::after {
position: absolute;
display: block;
content: "";
width: 350px;
height: 250px;
top: 100px;
left: 100px;
background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
background-repeat: no-repeat;
background-size: 240px;
background-position:center center;
background-color: rgba(0,0,0,0.2);
backdrop-filter: blur(4px);
border-radius:20px;
}
and perhaps use instead this rgba background
rgba(159, 171, 154, 0.5)
Tried this from your link but not showing:
#top .avia-fullwidth-slider.logo-over-video::after {
position: absolute;
display: block;
content: “”;
width: 280px;
height: 120px;
top: 150px;
left: 100px;
background-image: url(https://www.thegatheringbarn.co.uk/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
background-repeat: no-repeat;
background-size: 240px;
background-position:center center;
background-color: rgba(255,255,255,0.3);
backdrop-filter: blur(4px);
border-radius:20px;
}
Hello,
Thank you, yes it is still not working on front end after cache purge, tried different browsers, and I also tried it in incognito.
Specifically, if you check the homepage
The special headings are janky (moving roughly, happens on other pages too)
The animated number section doesnt work as intended anymore
The animations for the images are no longer working.
Sorry – now i see that you used the fullscreen slider! why?
Anyway – this is similiar to the other slider – but then the video is cropped on some screen width.
because your png isn’t transparent it does not make sense to have a limit of after pseudo-container:
#top .avia-fullscreen-slider:after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
top: 150px;
left: 50px;
background-image: url(https://www.thegatheringbarn.co.uk/wp-content/uploads/2017/04/logo2.png);
background-repeat: no-repeat;
background-size: 200px;
background-position: 20px 10px;
}
as menitoned above – use a custom class to better select.
PS: this page is transparent? why don’t you use the logo instead for “branding”
Hi,
I uploaded the sacramento google font that was linked above

and it seems to work fine

with your custom class and css, please clear your browser cache and check.
Best regards,
Mike
Hey Darjan,
I see that you are using v5.4.1, please update to v7.0.1
I also see that updates on your site have been disabled, so you may need to manually update with the steps below.
If you need further assistance please log in to the support forum and open a new thread If you are unable to login to the support forum because you don’t have a activate support contract, please try going to your Theme Forest account and renew your support and then log in to the support forum and open a new thread.
Please note that using the contact form is not appropriate for support questions.
To update your version of Enfold you will need to download the latest installable WP version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.
Best regards,
Mike
Hi Ismael
Yeah that’s what I thought but we were clearly getting issues with this approach and the buttons were showing over text. The only think that seemed to work was the spacer image forcing the button to move down.
It did not matter how large I made the padding or margins etc it did not fix the issue so that’s why I resorted to the spacer.
Due to time constraints I will leave the spacer image but revisit it to see if I can figure out what is going on.
Thanks for your help. When I revisit it I may need further assistance.
Lee
Hello
Sorry, the problem has gotten worse, the subject of the photo was even lower…
I have changed my picture for trying to have what I Want, but it’s not good
I don’t understand why the size of the model image (enfold gym) is 1500 x 720 and the actual height of the page banner is 420…
Could you tell me what size banner and settings I should make to have a nice banner? It’ll be easier :-).
I have another question you haven’t answered: the image is degraded, too much compression, how and where can I change this setting?
Thank you for your help.
DarjanGuest
Hello.
We use your theme for long time now and it was working fine. Last year we experienced problem with not showing variation images. Can you please help us with that, as we have many problems with customers, because theme is not showing variation images, when you choose variation. Our website is: robbo.si. We also dissabled all plugins but still not showing images of variations. We have set variation images too.
I hope someone can help me.
Thank you.
Darjan