Hey!

Thanks for the screenshot. The issue is resolved by adding custom css to Enfold > Alignment Styling > Quick CSS

Best regards,
Vinay

Hi Ashiado!

Hi at the moment it is not possible to do it without making changes to the core files.
However a similar solution is available which might just work great for you and we can to this with help of custom css.

We can instead fade out the background color to a dark color and the image will be visible with a black tint.

Here is the code we can try in “Enfold > General Styling > Quick CSS”

@media (max-width: 47.9375rem) {
.av-inner-masonry-content.site-background {
background-color: rgba(0,0,0, .5);
}
.av-masonry-entry .av-masonry-entry-title {
color: #fff;
}
.av-masonry-entry .av-masonry-entry-title:hover {
color: #fff;
}
}

Please provide us your login info to help you with this issue further.
Cheers!
Vinay

Hey!

It is possible that a plugin is causing a conflict I recommend trying the same by disabling all plugins and update to latest version. Please let us know if the same issue exist.

Best regards,
Vinay

Hey!

I’m glad we could help you get back your site!

There are some security plugins you can use like Wordfence you need to use it on your own risk as Enfold do not guarantee 3rd party plugins.
Also just google “WordPress better security” and you will find some helpful tips. All this should be performed with a backup of your site just in case if it cause any mess we always need to be safe.

Regards,
Vinay

Hi!

Hi Simon,

As I understand all you need is a good starting point to get to know how to setup the pages.

I would suggest to you to take a look at

https://vimeo.com/channels/aviathemes
http://kriesi.at/documentation/enfold/

This should help you get to know the Avia Layout Builder and how to play with the demo content.

Regards,
Vinay

Hi!

Please try the below code in the quick css it should work if not request you to send us the login details in a private message.

@media (max-width: 1160px) {
.ls-inner, .ls-slide {
    width: 100%;
    height: 100%;
    transform: translateX(2.5%);
    /* margin: 0 auto; */
}
}

Regards,
Vinay

Hey Charlotte!

How are you today!

1. Please add the image using Avia Layout builder > Media elements > Image

The images will be fully responsive.

2. To change the text size please login to wordpress backend as admin and goto > Enfold Options > Advanced Styling > Select an element to customize.

Best regards,
Vinay

Hey!

Thanks for the screenshots.

1. The images seem to fit the grids . however I have added background image stretch to fit css property in below code.
2. I have added the required css for this if it don’t work please provide us with the login details in a private message so we can make the changes for you.

#av-layout-grid-1 > div:first-child {
    background: white !important;
}
#av-layout-grid-1 > div:first-child:hover {
	color:#fff;
    background: #000 url("URL to your image") !important;
    background-size: cover!important;
}
#av-layout-grid-1 > div:nth-child(2) {
    background: white !important;
}
#av-layout-grid-1 > div:nth-child(2):hover {
	color:#fff;
    background: #000 url("URL to your image") !important;
    background-size: cover!important;
}
#av-layout-grid-1 > div:nth-child(3) {
    background: white !important;
}
#av-layout-grid-1 > div:nth-child(3):hover {
	color:#fff;
    background: #000 url("URL to your image") !important;
    background-size: cover!important;
}

Cheers!
Vinay

Hey!

I have added the custom css into
Enfold Options > Website Styling > Quick CSS

However the text seem to be a lot for a tablet device.

One alternate solution would be to hide the text in tablet let me know If you wish to hide it.

@media only screen and (max-width: 1200px) {
    .slideshow_caption {
        width: 80%;
    }
    .responsive #top .slideshow_caption .avia-caption-content * {
        font-size: 13px !important;
    }
}

@media only screen and (max-width: 480px) {
    .slideshow_caption {
        width: 100%;
    }
}

Cheers!
Vinay