Hey navindesigns,

This CSS is causing that:

#top #wrap_all .all_colors h2 {
  line-height: 20px !important;
}

Check in Quick CSS or under Enfold->Advanced Styling.

Best regards,
Rikard

Hi,

Do you mean the gap between the first and second section on the front page? If so, then that is a section which automatically is being added after a slider. You can remove the padding and minimum height using this CSS:

.content {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

Note that it will apply to all elements with that class.

Best regards,
Rikard

Hi,

Please try this instead:

@media only screen and (max-width: 767px) {
#top fieldset {
  display: contents;
}
}

Best regards,
Rikard

Hi,
Glad that Ismael could help, you are correct that non-touch devices will not encounter touch events, so it should not be an issue. Unless there is anything else with this issue, shall we close this thread? Naturally you can always open a new thread for new issues, but we like to keep each thread on topic. :)

Best regards,
Mike

Hey Georg,

Thanks for reaching out to us. The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hey teresa,

The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,

Thank you for the update.

You can apply a custom css class (e.g “av-tab-section-title-limit”) to the tab sections where you need the modifications, then adjust the selectors in the css rules accordingly. Please check this documentation for more information on how to apply custom css class names to the elements.

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

#top .av-tab-section-title-limit .av-tab-section-tab-title-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#top .av-tab-section-title-limit .av-tab-section-tab-title-container > * {
    flex: 0 0 calc((100% / 6) - (10px * 5 / 6));
    max-width: calc((1310px - (10px * 5)) / 6);
    box-sizing: border-box;
}

Best regards,
Ismael

Hey!

Thank you for the update.

Please add this to the style block or style element:

.ava-go-back-wrapper {
    position: absolute;
    z-index: 99;
    left: 55%;
    right: auto;
    top: 5px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

We updated the script in the functions.php file — the page should now be scrollable.

function remove_slideshow_swipe_script() { ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth <= 768) {
        var slideshow = document.querySelector('.avia-slideshow');
        if (!slideshow) return;

        slideshow.style.touchAction = 'pan-y';

        let startX = 0;
        let startY = 0;

        slideshow.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        }, {passive: true, capture: true});

        slideshow.addEventListener('touchmove', function(e) {
            const dx = Math.abs(e.touches[0].clientX - startX);
            const dy = Math.abs(e.touches[0].clientY - startY);

            if (dx > dy) {
                e.preventDefault();
                e.stopImmediatePropagation();
            }
        }, {passive: false, capture: true});
    }
});
</script>
<?php
}
add_action( 'wp_footer', 'remove_slideshow_swipe_script', 99 );

Best regards,
Ismael

Hi,
Thanks, I added this script to your child theme functions.php file:

function remove_slideshow_swipe_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth <= 768) {
        var slideshow = document.querySelector('.avia-slideshow');
        if (slideshow) {
            slideshow.style.touchAction = 'none';
            
            ['touchstart', 'touchmove', 'touchend'].forEach(function(event) {
                slideshow.addEventListener(event, function(e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                }, {passive: false, capture: true});
            });
        }
    }
});
  </script>
  <?php
}
add_action( 'wp_footer', 'remove_slideshow_swipe_script', 99 );

and it is working for my Android device, with the other script still working, as before if you are using a iPhone you may need to clear the history to fully clear the cache.

Best regards,
Mike

Hey Angelo,

Thank you for the inquiry.

Try to add this code to the functions.php file to insert a go back button inside the header container.

add_action( 'ava_main_header', 'ava_main_header_mod' );
function ava_main_header_mod() {
    ?>
    <div class="ava-go-back-wrapper">
        <a href="javascript:history.back();" class="ava-go-back-button">Go Back</a>
    </div>

    <style>
        .ava-go-back-wrapper {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
        .ava-go-back-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .ava-go-back-wrapper {
                display: flex;
            }
        }
    </style>

    <script>
        function closeBurgerMenu() {
            const burgerBtn = document.querySelector('.av-burger-menu-main .av-hamburger.av-js-hamburger');
            const overlay = document.querySelector('.av-burger-overlay');
            if (burgerBtn && burgerBtn.classList.contains('is-active')) {
                burgerBtn.classList.remove('is-active');
            }
            if (overlay) {
                overlay.style.display = 'none';
                overlay.style.opacity = '0';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            closeBurgerMenu();

            const goBackBtn = document.querySelector('.ava-go-back-button');
            if (goBackBtn) {
                goBackBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    closeBurgerMenu();
                    setTimeout(function() {
                        history.back();
                    }, 50);
                });
            }
        });

        window.addEventListener('pageshow', function(event) {
            if (event.persisted) {
                closeBurgerMenu();
            }
        });
    </script>
    <?php
}

Best regards,
Ismael

Hi,

Sorry for the delay. Since removing the br tags also removes the list items, we used this css in the style.css file to hide the line breaks and display the list as a standard bullet list.

.av-masonry-entry-content ul br {
    display: none;
}

.av-masonry-entry-content ul li {
    padding-left: 10px;
	position: relative;
}

.av-masonry-entry-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1em;
    line-height: 1;
}

Please check the private field for the screenshot.

Best regards,
Ismael

Hey photographie-tous-azimuts,
Try adding this css:

/* Disable touch/swipe on mobile */
@media (max-width: 768px) {
    .slider-container,
    .slider-container * {
        touch-action: none !important;
        -webkit-user-drag: none !important;
        user-select: none !important;
    }
}

Then clear your cache and check. Unfortunately I can not test this on my end as desktop browser doesn’t show the swipe action, but this will likely work.
If you are using a iPhone you may need to clear the history to fully clear the cache.

Best regards,
Mike

Hi,
When I check it looks correct now on mobile & desktop, if this is solved please let us know so we can close this thread.

Best regards,
Mike

Hey ti2media,
Try this css in your child theme stylesheet:

#top.home #av-masonry-1.av-masonry a.av-masonry-entry {
	margin-bottom: 50px !important;
}
#top.home #av-masonry-1.av-masonry .av-inner-masonry {
	overflow: visible;
}
#top.home #av-masonry-1.av-masonry .av-inner-masonry-content {
	position: relative !important;
	top: 100%;
	width: auto;
}

Then clear your cache and check.

Based on Guenni007’s solution.

Best regards,
Mike