Hey macuti,
I have added it below for you. Please see this post: https://kriesi.at/support/topic/copytrack-wants-me-to-show-a-license-for-an-image-included-in-the-demo/#post-1495685
If you read the whole thread you will see two links to the same image, the one for which we have a license for from 2014 by the user francesco83 and a newer one that copytrack is claiming for the user genious2000de or perhaps it is the same person, we don’t know. Either way our extended license is valid.
Please note that we can not offer legal advice.

Best regards,
Mike

Hey debbiepeverelli,

Thank you for the inquiry.

1. The overlapping image is likely due to the absolute positioning, which causes it to appear incorrectly scaled on smaller screens. The best approach is to either hide it on mobile or manually adjust its size using css media queries.

You may need to apply a custom css class name to the overlapping image element.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Once you have added a custom class, for example av-overlap-image, you can target it on smaller screens like this:

@media only screen and (max-width: 767px) {
    .av-overlap-image {
        display: none;
    }
}

Or if you prefer to keep it visible but resize it:

@media only screen and (max-width: 767px) {
    .av-overlap-image {
        width: 80px;
        height: auto;
        top: 20px;
        left: 10px;
    }
}

You can add these css rules to Enfold > General Styling > Quick CSS field and adjust the values as needed.

2. The light blue highlight on focused fields and the green success message are default styles applied to the contact form. You can override them by adding the following to Enfold > General Styling > Quick CSS field — adjust the color values to match your site:

#top .avia-form .avia-input:focus,
#top .avia-form .avia-textfield:focus {
    background-color: #yourcolor;
    border-color: #yourcolor;
}

#top .avia-form .avia-success {
    background-color: #yourcolor;
}

#top .avia-form .avia-success p {
    font-family: inherit;
    font-size: inherit;
    color: #yourcolor;
}

Replace #yourcolor with the hex values that match your site palette.

Let us know the result.

Best regards,
Ismael

Hey!

Thank you for the info.

We tried logging to the site but the previous credentials are invalid.

We adjusted the script a bit so it properly intercepts the click at the .av-horizontal-gallery-wrap level, check if the clicked target is an anchor pointing to a toggle or accordion item and override the default gallery behavior.

Please replace the existing script in functions.php with this updated version:

add_action( 'wp_footer', 'ava_wp_footer_script_mod', 99 );

function ava_wp_footer_script_mod() {
    ?>
    <script>
    (function($) {
        $(document).on('click', '.av-horizontal-gallery-wrap', function(e) {
            var $anchor = $(e.target).closest('a[href^="#toggle-id-"]');

            if (!$anchor.length) return;

            e.preventDefault();
            e.stopImmediatePropagation();

            var href = $anchor.attr('href');
            var targetId = href.slice(1);
            var $title = $('#toggle-toggle-' + targetId);
            var $wrap = $('#' + targetId);

            if (!$title.length) return;

            if (!$wrap.hasClass('active_tc')) {
                $title.trigger('click');
            }

            setTimeout(function() {
                $('html, body').animate({ scrollTop: $title.offset().top - 80 }, 500);
            }, 300);
        });
    })(jQuery);
    </script>
    <?php
}

Please make sure to purge the cache before testing. Let us know the result.

Best regards,
Ismael

Hey cherrmann,

Thank you for the info.

We took a look at the page and found that there is an invisible Separator / Whitespace element just above the footer that has a height of 300px. This is what is causing the large gap on mobile view.

You can locate this element in the layout builder and either remove it or you can try this css to adjust its height on mobile view:

@media only screen and (max-width: 767px) {
  #top .hr.hr-invisible.av-mljdspyf-71312ddfce3302f17c1d53863ec1237a {
    height: 50px;
  }
}

Let us know if the issue persists.

Best regards,
Ismael

Hey nioperik2,

Thank you for the inquiry.

The wpo-minify folder is created and managed by the WP-Optimize plugin, so this is not something directly related to the Enfold theme itself.

We found a support thread that addresses your exact question, but we’re not sure if this is still accurate.

— https://wordpress.org/support/topic/can-i-delete-minify-folder/

For more details, please refer to the WP-Optimize documentation.

— https://teamupdraft.com/documentation/wp-optimize/getting-started/

For any further questions specifically about WP-Optimize, we recommend reaching out to the WP-Optimize support team directly.

Best regards,
Ismael

Hey oestersund,

Thank you for the update.

You’re right, the issue is that the previous css uses display: none !important; without scoping it to a specific page, so it ends up hiding #layer_slider_2 on all pages, not just the homepage.

The fix is to wrap those rules in a page-specific selector. The easiest way to do this is to use the unique body class that WordPress adds for each page. For example, if your homepage has the slug “home”, the body class would be something like page-id-123 or home. You can check the exact class by inspecting the body tag in your browser’s dev tools.

Once you have the body class for your homepage, update the css like this:

/*Homepage Slider Laptop Mobile*/
@media only screen and (min-width: 768px) {
    .page-id-123 #layer_slider_1 { display: block !important; }
    .page-id-123 #layer_slider_2 { display: none !important; }
}
@media only screen and (max-width: 767px) {
    .page-id-123 #layer_slider_2 { display: block !important; }
    .page-id-123 #layer_slider_1 { display: none !important; }
}

Replace .page-id-123 with the actual page ID class from your homepage body tag. This way the hide/show rules only apply on the homepage and all other pages with layer sliders will display normally on mobile again. This documentation should help.

— https://kriesi.at/documentation/enfold/add-custom-css/#how-to-inspect-an-element-on-the-page

Please make sure to purge the cache before testing. Let us know if the issue persists.

Best regards,
Ismael

Hey Erwin,

Thank you for the inquiry.

You can disable the hover/focus effect on the masonry gallery images by adding the following css to Enfold > General Styling > Quick CSS:

#top .av-masonry-item .av-masonry-image-container:before,
#top .av-masonry-item .av-masonry-image-container:after {
    display: none !important;
}

#top .av-masonry-item:hover .av-masonry-image-container img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

If you only want to target a specific masonry gallery on the page and leave the others unaffected, you can wrap it in a section or cell with a Custom CSS Class and then use that class as the parent selector in the code above.

— https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Let us know if the issue persists.

Best regards,
Ismael

Hey Daniel,
Please see this thread: https://kriesi.at/support/topic/cve-2022-48285-on-jszip-3-6-0/#post-1470007
If you wish, you can request the Dev Team to consider this again on our Feature Request: https://github.com/KriesiMedia/Enfold-Feature-Requests/issues
Note that at the time the updated version was buggy and did not work as it should, perhaps there is a newer update at this time? The Dev Team would need to review though the Feature Request link above.
See https://kriesi.at/support/topic/cve-2022-48285-on-jszip-3-6-0/#post-1469608

Best regards,
Mike

Hi,
The issue is that newer versions of jQuery (1.9+) no longer support the old CSS selector syntax using bare # characters. We need to escape them properly. This is the updated code that I added to your site, I also changed the offset to match your header height.

function slow_scroll_to_anchor() { ?>
  <script>
(function($) {
  $('a[href*="#"]:not([href="#"])').click(function() {
    var width = $(window).width()
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        if ($(window).width() < 768) {
          $('html,body').animate({
            scrollTop: target.offset().top - 150
          }, 1000);
          return false;
        } else {
          $('html,body').animate({
            scrollTop: target.offset().top - 250
          }, 1000);
          return false;
        }
      } 
    }
  });

  // Executed on page load with URL containing an anchor tag.
  var hash = location.href.split("#")[1];
  if (hash) {
    var target = $('#' + hash);
    if (target.length) {
      if ($(window).width() < 768) {
        $('html,body').animate({
          scrollTop: target.offset().top - 150
        }, 1000);
      } else {
        $('html,body').animate({
          scrollTop: target.offset().top - 250
        }, 1000);
      }
    }
  }
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'slow_scroll_to_anchor', 99 );

Please clear your cache and check.

Best regards,
Mike

Hey ivancazzol,
Please note that the Grid element gets it’s height from the elements inside of it, so on mobile, when the top grid row is stacked the right side cell that only has a background image, that shows below the first cell, will have no height. In our demo it has has another image element in it the “Parallax” text

To correct yours, add a Whitespace (hr) element with a min-height that you want it to be, perhaps 200px or so.

Best regards,
Mike

Hey Sebastian,
A mobile transparent header is not an option in the theme, it can be achieved with custom css. There is not one solution for all sites, so you may need to adjust the top margin some:

@media only screen and (max-width: 766px) { 
.responsive #top #main {margin-top: -80px!important;} 
#top #wrap_all .av_header_transparency {background-color: transparent!important;}
div#header_main > .container {display: block !important;}
} 

Best regards,
Mike

Hey Elena,

Thank you for the inquiry.

Edit the page then try to set the Layout > Header visibility and transparency settings to No Transparency or Transparent & Glassy Header. To center the logo, please try this css code:

#header_main .inner-container {
    display: flex;
    align-items: center;
    width: 100%;
}

#header_main .main_menu,
#header_main .av-main-nav-wrap,
#header_main .av-main-nav {
    display: contents;
}

#header_main .logo {
    order: 35;
    flex-shrink: 0;
    margin: 0 40px;
    transform: translate(10px, 10px);
}

#header_main .menu-item-top-level-1 { order: 10; margin-left: auto; }
#header_main .menu-item-top-level-2 { order: 20; }
#header_main .menu-item-top-level-3 { order: 30; }
#header_main .menu-item-top-level-4 { order: 40; }
#header_main .menu-item-top-level-5 { order: 50; }
#header_main .menu-item-top-level-6 { order: 60; margin-right: auto; }

#header_main .av-burger-menu-main {
    display: none;
}

You may need to shorten the title of the “Cosa posso fare per te” menu item.

Best regards,
Ismael