Hi,
Ok, try adding this css:

@media only screen and (max-width: 767px) {
	.responsive #top.post-type-archive-tribe_events #main {
		 padding-top: 30px !important;
	}
	#main > .container_wrap.container_wrap_first {
		 border-top-width: 0;
	}
} 

Then clear your cache and check.

Best regards,
Mike

Hey hegartpetersen,

Thank you for the update.

If you prefer wrapping the title container into multiple rows, please try to add this css code:

#top .av-tabs-scrollable .av-tab-section-outer-container {
    overflow: visible;
}

#top .av-tabs-scrollable .av-tab-section-tab-title-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    min-width: unset !important;
    left: 0 !important;
    white-space: normal;
}

#top .av-tabs-scrollable .av-section-tab-title {
    flex: 0 0 auto;
}

Note that this will hide the arrow indicator beneath the active tab since it depends on the container’s positioning logic. Please refer to the documentation on adding custom css classes to elements:

— https://kriesi.at/documentation/enfold/add-custom-css/

Let us know the result.

Best regards,
Ismael

Hey cherrmann,

Thank you for the update.

The negative margin-top values in your custom css are pulling the footer upward and overlapping the content above it, which is why the submit button and other elements near the footer get cut off.

You have these rules defined in two places:

#footer {
    padding: 0 0 190px 0;
    margin-top: -190px;
    background-image: url(//janisch-schulz.com/wp-content/uploads/2022/05/090-footer-wasser.jpg);
    background-size: cover;
}

@media only screen and (max-width: 768px) {
    #footer {
        background: url(//janisch-schulz.com/wp-content/uploads/2022/05/090-footer-wasser-mobil.jpg);
        background-size: cover !important;
        margin-top: -360px;
    }
}

The negative margin-top on both rules is what pulls the footer up over your content. Remove both margin-top values and your submit button should become visible again. The padding-bottom on the desktop rule was likely added to compensate for the overlap, so you may want to revisit that value as well once the margin is removed.

Let us know if the issue persists.

Best regards,
Ismael

Hi,
I think that you misunderstand, do not add the css above, you already added it before, you need to remove it or change the padding-top: 0 !important; to padding-top: 30px !important;

Best regards,
Mike

Hi,
I changed the script to this:

function disable_horizontal_gallery_image_nav() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.av-horizontal-gallery-wrap').forEach(function(wrap) {
    const link = wrap.querySelector('a[href^="#toggle-id-"]');
    if (!link) return;

    const href = link.getAttribute('href');

    wrap.style.cursor = 'pointer';
    wrap.addEventListener('click', function(e) {
      e.stopPropagation();

      const toggleId = href.replace('#', '');
      const toggleTrigger = document.querySelector('[data-fake-id="' + href + '"], [href="' + href + '"], #' + toggleId + ' .toggler, .toggle-title[href="' + href + '"]');

      if (toggleTrigger) {
        toggleTrigger.click();

        let scrollTimer = null;
        window.addEventListener('scroll', function onScroll() {
          clearTimeout(scrollTimer);
          scrollTimer = setTimeout(function() {
            window.removeEventListener('scroll', onScroll);
            window.scrollBy({ top: -250, behavior: 'smooth' });
          }, 300);
        });

      } else {
        window.location.hash = href;
      }
    });

    link.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
    });
  });
});
  </script>
  <?php
}
add_action( 'wp_footer', 'disable_horizontal_gallery_image_nav', 99 );

Give it a try.

Best regards,
Mike

Hi,
I don’t understand how your custom search field is applied to your page, but I see that it is not the same on mobile. On desktop, when opened it has the classes: SumoSelect sumo_gallery_ids open and has a div with the classes: optWrapper okCancelInMulti multiple that creates the drop down.
On mobile it only has the class: SumoSelect and doesn’t have the div.
I see no errors that might point to this, but I believe that this is an error with your script and not with the theme. Try asking wherever you got the script from for further advice.

Yes img.savvyify.com is no longer working, try freeimage.host instead.

Best regards,
Mike

Hey spitsdesign,
You can request demos in our Feature Requests where the Dev Team will see it, click the green button at the top right “New Issue” to create a new request with the type of demo you would like to see.
Please keep each request to one topic, but you can summit multiple topics.

Best regards,
Mike

Hey schweg33,
Looks like you have added this custom css:

@media only screen and (max-width: 767px) {
    .responsive #top #main {
        padding-top: 0 !important;
        margin: 0;
    }
} 

Remove it or adjust the zero to something like 30px

Best regards,
Mike

Hey rixi,
Looks like you have this css in your child theme:

#header_main_alternate, #top #header .av-main-nav > li > a {
    background-color: #02507d !important;
} 

Change to this:

#header_main_alternate,.responsive #top #header .av-main-nav > li:not(.av-burger-menu-main) > a {
    background-color: #02507d !important;
} 

Best regards,
Mike

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