Hi,
In my tests it doesn’t seem that you can choose different background images for the slider, but if you add the background image as a layer you can set it to show based on screen size, for example, here I have one layer as my desktop background image with a “stacking order” set below 100 so the other layers will be on top, and the “device visibility” set to only desktop & tablet:

the here I have a different image used for the mobile background image:

then mobile shows:

and desktop / tablet shows:

now I know your “yellow background” is not full size but you should be able to manually “position” the layer in the layerslider editor for the desired placement.

Best regards,
Mike

Hi,
Please link to your page so we can examine your specific element closer.

Best regards,
Mike

Hi,
Thanks Guenni007, they are using the avia-fullscreen-slider,
height: 100vh
background-size: cover;

if background-size: contain; is used the image doesn’t fill the width
here is a copy of the image: https://savvyify.com/img/image/udGp (2400 × 1600)

Best regards,
Mike

Hi,
Please try disabling any caching plugins and Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression then enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files and clear your browser cache, If this doesn’t correct please include admin login in the Private Content area so we can investigate.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Guenni007, thank you for taking the time to demonstrate this.

Best regards,
Mike

Hey Nomad,
Unfortunately there is not an argument that can be added to the shortcodes, but you could use css in your Quick CSS field like this:

#top .av-tt-large-width {
    width: 350px;
}

If this doesn’t help please link to the page so we can examine the element closer.

Best regards,
Mike

Hi,
Thank you for your patience, for the av-tab-section-tab-title-container this can be adjusted with css like this:

#top #main .av-tab-section-tab-title-container {
	max-width: 600px;
	margin: auto;
}

the javascript for the element width is in the file \enfold\config-templatebuilder\avia-shortcodes\tab_section\tab_section.js I don’t recommend that you edit this file.
If you need further help please create an example page and detail what you are trying to achieve so we can examine your specific issue and help with some css.

Best regards,
Mike

Hi,
Typically you would use the Enfold Theme Options ▸ Header ▸ Header behavior ▸ Shrinking Header to have the header shrink on scroll:

You could limit the height of the full size logo like this:

#header_main .logo img {
    max-height: 60px;
}

This should help make all browsers uniform.

Best regards,
Mike

Hi,
Thank you for the login, the issue was that you had your the Advanced Layout Builder for your blog posts, please use the default WordPress editor for blog posts and the Advanced Layout Builder for pages. I adjusted one of your posts to demonstrate, please see the category page linked below.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thanks for your patience, I adjusted your css a little to correct the burger icon and the search icon and added this to make your mobile header sticky:

@media only screen and (max-width: 767px) {
.responsive.html_header_top.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }
}

Note that once you scroll some the header is not transparent, thus the white header background, this is the correct behavior and the desktop version also does this.
Please clear your browser cache and check.

Best regards,
Mike

Hey Paul,
Looking at your H1 tag “WELCOME TO…” it looks like the font weight 600 has tried to be applied with this css:
h1,h2,h3,h4,h5,h6 {font-weight: 600}
is this what you tried to add? This rule doesn’t have enough specificity to override the theme rule:

#top #wrap_all .all_colors h1,
#top #wrap_all .all_colors h2,
#top #wrap_all .all_colors h3,
#top #wrap_all .all_colors h4,
#top #wrap_all .all_colors h5,
#top #wrap_all .all_colors h6 {
    font-weight: 400;
}

Try using Enfold Theme Options ▸ Advanced Styling ▸ All Headings (H1-H6)

and then clear your browser cache and any cache plugin, and check.
It looks like your page text “p tag” is also trying to be bold but I’m not sure how you are trying to do this, but you can also use the Enfold Theme Options ▸ Advanced Styling for this.

If you continue to experience issues with this please include admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Thanks for the screenshot, your Capture-3.jpg shows a category archive page, on my demo site this works as you are requesting:

Please include an admin login in the Private Content area so we can examine.

Best regards,
Mike

Hi,
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.
I would like to point out that if you are testing by “Zooming” then this will give you incorrect results, you should instead use the Dev Tools (typically F12, or menu ▸ more tools ▸ developer tools) all browsers have to same Dev Tools and behave basically the same, please read this article for Chrome: Simulate mobile devices with Device Mode, in Safari it’s called Responsive Design Mode

Now the reason your transparent buttons in your custom footer are stacking on smaller screens is because you have them in a 1/3 column:

You should remove this from the column so it will be full width:

and set the alignment to left:

then even on smaller screens they will be in a row:

Best regards,
Mike