Hi,
Thanks for the screenshot and the link to your site, there are a lot of customizations for the mega menu and looks complex, I tried to make some adjustments but they were not changing on the frontend as I would expect, are you sure that the FTP login you posted is for your staging site that you linked to? Please check.

Best regards,
Mike

Hey dowlassmoss,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 480px) { 
	#top.home .avia-slideshow-button {
		display: none;
	}
}

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.
this will hide the buttons below 480px and then the caption will show.

Best regards,
Mike

Hi,
Thanks for the feedback, I have followed these steps, nosniff is set in the header, post-xxx.css files are generated on the pages, and I checked incognito on Windows in Chrome, Firefox, Brave & Edge and color section background images show correctly and I have no console log errors:

Best regards,
Mike

Hi,
Thanks, I see your site is using PHP v7.4.33, try updating to v8 and check again.

Best regards,
Mike

Hi,
Thanks for the feedback, I checked your page again and the two 1/5 column are hidden the reason you text column is not full width is because it is a 3/5 column, so I recommend adding the class cell-nodisplay to your text column and add another full width column with the class cell-dodisplay and try this css:

@media only screen and (min-width: 1440px) {
.cell-dodisplay {
display:none !important; }
}

Best regards,
Mike

Hi,
It doesn’t look like that for me on Android or in the inspector on desktop, the page css uses the same font, so I’m not sure why you are seeing this. Please see the screenshot in the Private Content area.

Best regards,
Mike

Hey leilitacc,
The tabs section has many options to add color:

but your screenshot look more like a toggle/accordion element, but it also has many color options:

Try creating a test page and use the options to change the colors and if you find something you can’t change link to it so we can help with some css.

Best regards,
Mike

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

#top #wrap_all #header .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    color: #000;
    font-size: 16px;
}

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

Hi,
You can add the page ID to the css so it will only work on the one page, like this for example:

.postid-4308 img.mfp-img {
  width: 1200px !important; 
  max-width: 1200px !important;  
  height: 1976px !important;
  max-height: 1976px !important;
}

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

Hey Steve,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('avia_layout_filter', 'avia_change_post_layout', 10, 2);
function avia_change_post_layout($layout, $post_id) {
	if( is_shop() || is_product_tag() || is_product_category() || is_cart() || is_checkout()) {
        $layout['current'] = $layout['fullsize'];
        $layout['current']['main'] = 'fullsize';
    }
	if( is_product() ) {
	$layout['current'] = $layout['fullsize'];
        $layout['current']['main'] = 'fullsize';
    }
    return $layout;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
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:

then add the above code and save.

Best regards,
Mike

Hi,
Please give this a try, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function group_lightbox_images(){
?>
<script>
(function($){
    $(window).on('load', function() {
        $('.lightbox-added').each(function() {
            var parentClass = $(this).closest('[class*="group-"]').attr('class');
            if (parentClass) {
                var match = parentClass.match(/group-(\d+)/);
                if (match && match[1]) {
                    $(this).attr('data-group', match[1]);
                }
            }
        });

        var groups = {};
        $('.lightbox-added').each(function() {
            var id = parseInt($(this).attr('data-group'), 10);
            if (!groups[id]) {
                groups[id] = [];
            }
            groups[id].push(this);
        });

        $.each(groups, function() {
            $(this).magnificPopup({
                type: 'image',
                mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
                closeOnContentClick: false,
                closeBtnInside: false,
                gallery: { enabled: true }
            });
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'group_lightbox_images');

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:

then add the above code and save.
Then add the custom class group-1 to each accordion slider, changing the number for each one, ie: group-2, group-3, etc.

Then when the image in any group is opened only the other images in the same group will show.

Best regards,
Mike

Hey liuxuewu,
To globally set your title & breadcrumbs on pages created with the Advanced Layout Builder, go to Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Title and Breadcrumbs and set it to Display title and breadcrumbs:

But note that if any of your pages have this disabled on the page, you will need to change the option on the page. You can check by going to your page and look in the Layout ▸ Title Bar Settings and ensure that it is set to Default Layout – set in Enfold Child > Header:

Best regards,
Mike

Hey Eleina,
I didn’t find a way to do this so I created a shortcode to create a button that will play a audio file and show a progress bar for the audio track while it is playing

The shortcode to use on your page:
[audio_player src="URL_TO_YOUR_AUDIO_FILE.mp3" text="Custom Button Text"]
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

// use this shortcode: [audio_player src="URL_TO_YOUR_AUDIO_FILE.mp3" text="Custom Button Text"]
function custom_audio_player_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'src' => '',
            'text' => 'Play Audio',
        ),
        $atts,
        'audio_player'
    );

    // Generate a unique ID for this instance
    $uid = uniqid('audio_player_');

    ob_start();
    ?>
    <style>
        .custom-audio-player {
            position: relative;
            max-width:200px;
            margin-bottom:10px;
        }

        .audio-control {
            position: relative;
            overflow: hidden;
            padding: 10px;
            border: none;
            background-color: #007bff;
            color: #ffffff;
            cursor: pointer;
            width:200px;
            transition: background-color 0.3s ease;
        }

        .audio-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 5px;
            background-color: #ff0000;
            width: 0;
            max-width: 100%;
            transition: width 0.1s linear;
        }
    </style>
    <div class="custom-audio-player" id="<?php echo $uid; ?>">
        <button class="audio-control"><?php echo esc_html($atts['text']); ?></button>
        <div class="audio-progress"></div>
    </div>
    <audio class="custom-audio" src="<?php echo esc_url($atts['src']); ?>"></audio>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var player = document.getElementById('<?php echo $uid; ?>');
            var audio = player.nextElementSibling;
            var button = player.querySelector('.audio-control');
            var progress = player.querySelector('.audio-progress');
            var originalButtonText = "<?php echo esc_js($atts['text']); ?>";

            button.addEventListener('click', function() {
                if (audio.paused) {
                    audio.play();
                    button.textContent = 'Pause Audio';
                } else {
                    audio.pause();
                    button.textContent = originalButtonText; // Use originalButtonText instead of hardcoding
                }
            });

            audio.addEventListener('timeupdate', function() {
                var duration = audio.duration;
                var currentTime = audio.currentTime;
                var progressWidth = (currentTime / duration) * 100 + '%';
                progress.style.width = progressWidth;
            });

            audio.addEventListener('ended', function() {
                button.textContent = originalButtonText;
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('audio_player', 'custom_audio_player_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
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:

then add the above code and save.
You can adjust the css in the code above to suit your site.

Best regards,
Mike

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

.avia-video, .avia-iframe-wrap {
    margin-bottom: 0;
}

if this doesn’t help then please link to your page so we can examine.

Best regards,
Mike