Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top.home #wrap_all .flex_cell.av_one_third {
    padding: 0 !important;
}
.responsive #top.home #wrap_all .flex_cell.av_one_third .av_textblock_section {
	padding: 0 25px;
}
.responsive #top.home #wrap_all .flex_cell.av_one_third #rotesQuadrat {
	margin-left: 25px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this then:

.avia-caption {
    top: 17px;
}

If this doesn’t work then link to your page so we can examine.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top #wrap_all #av-burger-menu-ul > li,
#top #wrap_all #av-burger-menu-ul > li a {
	top:0 !important;
	opacity:1 !important;
	padding: 4px 0 !important;
}
}
@media only screen and (min-width: 768px) { 
#top #wrap_all #av-burger-menu-ul > li,
#top #wrap_all #av-burger-menu-ul > li a {
	top:0 !important;
	opacity:1 !important;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey stefpasi,
You probably have the caption set to “bottom without frame” in the slide:

Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.caption_fullwidth {
    position: relative;
    top: 20em;
}

adjust to suit.

Best regards,
Mike

Hey nm,
Thank you for your patience, to move cookie consent bar to top of the DOM so it is first in the tabindex, add the following code to the end of your child theme functions.php file in Appearance ▸ Editor.
The code also adds tabindex to the hidden checkboxes in the moral and hides the “toggle” switches, so the checkboxes can be tabbed to.
When tabbing in the moral you will first be able to tab though the tabs and use the enter key to select one, then keep tabbing to get inside the tab content and tab through the checkboxes. You can use the spacebar to enable/disable the checkboxes.

function move_cookie_consent_bar_to_top_of_dom_so_it_is_first_in_tabindex() { ?>
  <script>
	  document.addEventListener('DOMContentLoaded', function() {
    const messageBar = document.querySelector('.avia-cookie-consent-wrap');
    const body = document.querySelector('body#top');
    body.prepend(messageBar);
});
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('#av-consent-extra-info input[type="checkbox"]').forEach(checkbox => {
    checkbox.setAttribute('tabindex', '0');
  });
});
  </script>
<style>
#top .av-toggle-switch input[type="checkbox"] {
    display: inline;
}
#top .av-toggle-switch .toggle-label-content {
    display: inline;
}
#top .av-toggle-switch label .toggle-track {
    display: none;
}
</style>
  <?php
}
add_action( 'wp_footer', 'move_cookie_consent_bar_to_top_of_dom_so_it_is_first_in_tabindex', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This may not seem intuitive, so perhaps you will want to try a cookie bar plugin like Borlabs, I don’t know how keyboard tabbing works with it but many Enfold users like it.
If you are happy with just tabbing to accept or reject cookies with just a few tab keys then the above script will work fine, I see that your consent moral only has two checkboxes.

Best regards,
Mike

Hey dondela,
When I check with Safari v17.6 on Mac Monterey v12.7.6 the video autoplay works for me in desktop and in Responsive Design Mode emulating mobile.
Unfortunately, my Mac won’t update to Sequoia, but from what I can tell Safari v17.6 is the latest version for all Macs.
Are you seeing the cookie message and clicking it?

Best regards,
Mike

Hey schweg33,
These are hidden on mobile devices, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 325px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 20%;
    }
}
@media only screen and (min-width: 325px) and (max-width: 380px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 23%;
    }
}
@media only screen and (min-width: 381px) and (max-width: 450px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 25%;
    }
}
@media only screen and (min-width: 451px) and (max-width: 767px) {
    .responsive #top .avia-post-nav {
        display: block;
        top: 38%;
    }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
When I first checked, the white area was not fullwidth:

but now it is:

Perhaps you want this:

if so try adding this css:

@media only screen and (max-width: 767px) {
    #top #wrap_all .avia-caption-content p {
    width: 80%;
    margin: auto;
}
    #top #wrap_all .avia-slideshow .avia-caption-title {
        width: 80%;
        margin: auto;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey a_edemirci,
I recommend adding two more social media profiles, ones that you don’t plan on using. Then add the link to your language pages, for example 500px & behance:

Then add this css:

.social_bookmarks_five_100_px a:before {
	content: url(https://img.icons8.com/officexs/16/000000/great-britain.png);
	top: 12%;
  position: relative;
}
.social_bookmarks_five_100_px a svg {
	display: none;
}
.social_bookmarks_behance a:before {
	content: url(https://img.icons8.com/officexs/16/000000/switzerland.png);
	top: 12%;
  position: relative;
}
.social_bookmarks_behance a svg {
	display: none;
}

for this result:

to remove the hover title, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($){
  $(".social_bookmarks_five_100_px a, .social_bookmarks_behance a").hover(function(){
    $(this).removeAttr("title");
  });  
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container.caption_container {
        width: 100%;
        max-width: 100%;
    }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
*update* I tested the above script that you posted “Fix Yoast SEO pagination compatibility with Enfold theme using avia-element-paging” and it solved the issue on my site
<link rel="canonical" href="https://enfold.site.com/blog/blog-default/?avia-element-paging=2" class="yoast-seo-meta-tag">
If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code without the leading <?php and save.

Best regards,
Mike

Hey ricedean,

Thank you for the inquiry.

What happens when you toggle or temporarily disable the Enfold > Performance > File Compression settings? To temporarily fix the issue, try adding this code in the Quick CSS field.

#top .avia-buttonrow-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

Best regards,
Ismael

Hey manchust,

Thank you for the inquiry.

Did you add another logo slider for mobile view? Make sure that the Styling > Slider or Grid > Column count is set to 4, then add this css code:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .slide-entry {
    width: 24%;
    margin-left: 2%;
  }
}

Best regards,
Ismael

Hey MAJO_Agency,

Thank you for the inquiry.

1.) The scroll-to-top button is hidden by default on mobile view because most mobile devices have built-in ways to navigate to the top. If you like to display it again, add the following css:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #scroll-top-link {
    display: block;
  }
}

2.) We may need to inspect the site to better understand the issue. Please provide the site URL and login details in the private field.

Best regards,
Ismael

Hey envis,

Thank you for the inquiry.

That is the default style of the language switcher in the theme. If you need to add the submenu indicator, try to add this css code.

#top #header .menu-item-language .dropdown_available {
    content: "";
    display: inline-block;
    margin-left: 0.6em;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid rgb(201, 201, 201);
    margin-top: 0.2em;
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

We adjusted the code in the Quick CSS field a bit and temporarily disabled the Performance > File Compressions settings.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    font-size: 32px;
    line-height: 0.5em;
  }

  #top #wrap_all #header #av-burger-menu-ul>li.av-active-burger-items {
    opacity: 1;
    top: 0;
    left: 0;
    padding: 0.2em 0;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

#top .menu-item-search-dropdown > a.avia-svg-icon svg:first-child {
  z-index: 0;
}

Best regards,
Rikard