Hi,

Is there a way to get a color section to display the entire image as the background,

This is the same case as the full screen slider. The background image will not be fully visible inside the background positioning area (color section container) because it has to preserve the aspect ratio. You can set the color section’s “Background Repeat” settings to “Scale to fit” to display the whole image but you’ll probably get white spaces or gaps around the container. We can also set the background size to 100% via css but it will distort the image on certain screen sizes. Unfortunately, the Fullwidth Easy Slider has no parallax effect option because the images are not used as background.

If you want to learn more how css handles background images, please refer to the following link.

// https://www.w3schools.com/cssref/css3_pr_background-size.asp

Here’s how those background size property translates into the theme:

cover = “Stretch to fit”
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

contain = “Scale to fit”
Resize the background image to make sure the image is fully visible

Best regards,
Ismael

Hi,

There is actually a code block on the screenshot. Please remove it temporarily. Where are you testing this? I can’t reproduce the issue on Opera/Chrome, Windows 7.

Best regards,
Ismael

Hi,

top of the picture there is a white bar instead of the picture who was supposed to go all the way to the top.

That is actually how it’s supposed to display because header transparency is disabled on mobile view by default. The logo and the burger menu is not visible because they have the same color as the header. We can change the background color of the header on mobile view or you can upload a different logo for a non-transparent header and for the transparent header.

If you want to use a different logo for mobile view, please go to the Enfold > Header > Transparency Options panel, set a logo with a different color and adjust the menu color. That is going to be your logo and menu color for transparent header. You will also need to adjust the default color of the menu item in the General Styling > Logo Area panel and that will be the color that you’ll see on mobile view.

Add this code on the Quick CSS field if you want to change the header background on mobile view.

@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
    background-color: red;
    border-color: #e1e1e1;
}
}

Adjust the color values you wish.

Best regards,
Ismael

Hi,

Where are you testing this? I don’t see any “product_animation” columns on the “home-3” page. Please provide a link to the page.

Best regards,
Ismael

Hi,

Thanks for the update.

Yeah, you’re right. Changing the slide transition doesn’t fix it. I also tried to deactivate the plugins, set the slide timing to 0 and disable the theme’s file compression but nothing worked. Did you add any modifications that we don’t know of?

Best regards,
Ismael

Hi,

Can you give us a screenshot of the menu? I don’t really see any layout issue with the page.

Best regards,
Ismael

Hey HeadStudiosWeb,

Thank you for using Enfold.

Did you add any html tag to that particular text block? Please make sure that the html tags are closed properly because unclosed tags could break the builder content. Try to set the builder to debug mode first then we’ll check the page’s shortcodes.

// https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#debug-mode

Best regards,
Ismael

Hey Angeladlh,

Thank you for using Enfold.

Where can we see the issue? Please provide a link to the site, and a screenshot if possible.

Best regards,
Ismael

Hey weasyweb2015,

Thank you for using Enfold.

now i fix the problem using css

Shall we close the thread, or do you still need help with this? If you need further assistance, please provide a screenshot of the issue.

Best regards,
Ismael

Hey!

I see. I checked the live and dev site but I don’t see any difference. Have you tried disabling the theme’s Performance > File Compression settings after the update?

Best regards,
Ismael

Hey Sebastian,

Thank you for using Enfold.

You can use this code to deregister the theme’s map scripts.

add_action('init', 'ava_deregister_google_map_scripts', 30);
function ava_deregister_google_map_scripts() {
    wp_deregister_script('avia-google-maps-api');
    wp_deregister_script('avia_google_maps_front_script');
    wp_deregister_script('avia_google_maps_api_script');
    wp_deregister_script('avia_google_maps_widget_admin_script');
}

Please note that the theme’s map element will not work properly if you remove these scripts or use the filter above.

Best regards,
Ismael

Hey Rene759,

Thank you for using Enfold.

I can’t see the issue or the gallery overlay on the page. The items look the same. Please provide a screenshot of the issue.

Best regards,
Ismael

Hi,

It is loading the video on an unsecure connection even though it is set to https.

jquery.js?ver=1.12.4:3 Mixed Content: The page at 'https://faceafacemontreal.org/fr/contact/' was loaded over HTTPS, but requested an insecure resource 'http://www.youtube.com/embed/xvd3ZLpGf_A?feature=oembed'. This request has been blocked; the content must be served over HTTPS.
(index):1 Mixed Content: The page at 'https://faceafacemontreal.org/fr/contact/' was loaded over HTTPS, but requested an insecure resource 'http://www.youtube.com/embed/xvd3ZLpGf_A?feature=oembed&wmode=opaque&rel=0'. This request has been blocked; the content must be served over HTTPS.

Please try this plugin.

// https://wordpress.org/plugins/really-simple-ssl/

Best regards,
Ismael

Hi,

Thanks for the update. This css code should help.

.avia-gallery-thumb img {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

Just add it on the Quick CSS field.

Best regards,
Ismael

Hi,

You can try this css code since you’re using parallax effect.

#home-section-bg-img .av-parallax-inner {
    opacity: .2;
}

Best regards,
Ismael