ja – genau Ismaels Code.

lest ihr etwas die Posts nicht durch?
hier steht präzise wo der große Abstand herkommt!: https://kriesi.at/support/topic/too-much-distance-no-idea-anymore/#post-1471969 und das man diese Standard Werte ändern soll.

Ich fürchte, die werten Mitstreiter lesen nicht mehr – sondern copy pasten irgendeinen Code der angezeigt wird und das wars dann.
Echt frustrierend für jemand der Hilfe zur Selbsthilfe praktiziert. Ich habe doch nichts davon, wenn ich nur Code anbiete, der zwar funktioniert, aber den ihr nicht nachvollziehen könnt. und der auf der nächsten Seite auch nicht mehr funktioniert. Sorry Martin, das es jetzt dich traf – aber langsam habe ich keine Lust mehr.

____________

yes – Ismaels Code.

are you not reading the posts?
https://kriesi.at/support/topic/too-much-distance-no-idea-anymore/#post-1471969

it says exactly where the large gap comes from! – and that you should change that default values.

I’m afraid that the other participants don’t read any more – they just copy and paste some code that is displayed and that’s it.
Really frustrating for someone practicing self-help. I have nothing to gain from offering code that works, but which you can’t understand and which doesn’t work on the next page. I’m sorry, Martin, that it’s you who’s getting my frustration now, but it’s no fun anymore.

and to center the flex_columns itself :

#av-layout-grid-2 .flex_cell .flex_column {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

but as always all rules here do work on all elements that fit- better is to work more specific by a custom class set by you f.e. on that grid-row element.

Yes – but don’t miss to do that on all languages. ;)

i do not know if this works – because the button is inside an iframe – so external.

Try:

.ToastBase_module_toast__fb6cbe17 {
  display: none;
}

but isn’t that an option that could be made on vimeo itself on editing there the settings?

i think koksourcing belongs to the second level menu:

#top .av-main-nav ul ul {
    margin-left: 0;
    left: 208px;
    position: absolute;
}

I know that this worked once, in a previous version. I am now wondering why this no longer works, or why the elements can no longer be accessed. Should there actually be an error there?

it is not a matter of version – that order element remains to columns beside each other – and you could not handle the next row with it.
But. you can set 3 times 1/3 columns beside each other ( please do only insert these three columns to that color-section and nothing else )
now give a custom class to that color-section f.e.: one-three-two. (you know why) – and do not choose the equal height option !!!
see here the setting and the code to have the third column be bigger than the others – read the comments on the codes to understand the way.
https://webers-testseite.de/zar/

if this also works on mobile devices (I remember that it didn’t work with older browsers), then it is probably the best performing solution. Because a script solution would have to constantly query the screen width, which is why a “debounce and resize” function would have to be used for performance reasons. Enfold itself provides such a function. (Enfold’s debouncedresize function is a performance-optimized way to handle resize events without triggering excessive function calls)

function custom_logo_for_mobile(){
?>
<script>
(function($) {
    function updateLogo() {
        var $logo = $('.logo img'); // Select the logo image
        var mobileLogo 	= "/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.webp";
        var defaultLogo = "/wp-content/uploads/desert-tortoise-council-50th-ann-logo.webp";

        if ($(window).width() <= 1024) {
            $logo.attr('src', mobileLogo); // Use mobile logo
        } else {
            $logo.attr('src', defaultLogo); // Use default logo
        }
    }

    // Trigger logo update on debouncedresize
    $(window).on('debouncedresize', function() {
        updateLogo();
    });

    // Run logo update on initial load
    $(document).ready(function() {
        updateLogo();
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_for_mobile', 20 );

so this works too – but the srcset originally generated (during loading) remains and is then also displayed.
I don’t know how to change the srcset as well. If I switch off the responsive images under Performance, the change of logo images is also displayed at the frontend.

hm – that works best till now:
:lol

@media only screen and (max-width: 1024px) {
    .av-logo-container img {
        content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    }
}

Can you please remove the relevant snippets from your functions.php (save them to your desktop) and insert this instead?

function change_logo_with_screenwidth(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		
		// this is for loading the page on smaller screen-width 
		if ($(window).width() < 1025) {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
		}
		else {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
		}

		function b() {
			if ($(window).width() < 1025) {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
			}
			else {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
			}
		}

		$(window).on('debouncedresize', function() {
			b();
		});

	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'change_logo_with_screenwidth');

we had to see if the srcset inserted images will follow that script …

The if(wp_is_mobile()) { is a check if you are watching it on a mobile device ! : Link

is that what you try to do – or do you always want to change the logo if the header turns to header top posiiton – even for desktop screens lower than a given value (1024px)

this maybe a quick and dirty way – and please test if it works on other browsers – and mobile browsers too:
( in that case – you do not need those functions.php entries – but i will look if there is a solution for that too)

@media only screen and (max-width: 1024px) {
    .av-logo-container img {
        content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    }
}

So it’s about the footer page as a page in the frontend not loading the background; because in the frontend of the other pages you can see the background of that footer section.

could you please link the single page link for the footerpage?
f.e.: https://new.fiermanlawfirm.com/footer-page

i hope – if Günter or Ismael knows a much easier way to obtain that. ;)

i think that the above mentioned transition to show the text disturbs a bit the whole timing.
but try with a bit more delay

#top .avia-icon-circles-icon-text {
  transition: all 1s cubic-bezier(.175,.885,.32,1.275);
}

for child-theme functions.php:

function rotation_of_active_circle_icons(){
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
    const parent = document.querySelector('.avia-icon-circles-inner');
    const icons = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon');
    const texts = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon-text');
    let currentIndex = 0;
    let intervalId;

    function updateActiveClass() {
        // Remove the 'active' class from all elements
        icons.forEach(icon => icon.classList.remove('active'));
        texts.forEach(text => text.classList.remove('active'));

        // Add the 'active' class to the current index
        setTimeout(() => {
			icons[currentIndex].classList.add('active');
			texts[currentIndex].classList.add('active');
		}, 1500);

        // Update the index to the next element (loop back to 0 if at the end)
        currentIndex = (currentIndex + 1) % icons.length;
    }

    function startIntervalWithDelay() {
        // Add a delay before starting the interval
        setTimeout(() => {
            updateActiveClass(); // Ensure the first activation happens after the delay
            intervalId = setInterval(updateActiveClass, 6000);
        }, 3000); // 3-second delay before starting the interval
    }

    function stopInterval() {
        clearInterval(intervalId);
    }

    // Start the interval with delay
    startIntervalWithDelay();

    // Pause on hover and resume on mouse leave
    parent.addEventListener('mouseenter', stopInterval);
    parent.addEventListener('mouseleave', startIntervalWithDelay);
});
</script>
<?php
}
add_action('wp_footer', 'rotation_of_active_circle_icons');

here is the result for that script and your “home” page:
https://webers-testseite.de/circle-rotator.mp4

or with a background-image on your text:

#top .avia-icon-circles-icon-text {
  background-image: url(https://coachcristina.com/wp-content/uploads/2024/12/WhatsApp-Image-2024-12-11-at-11.09.04.jpeg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: all 1s cubic-bezier(.175,.885,.32,1.275);
}

#top .avia-icon-circles-icon-text-inner * {
  color: #FFF
}

ok on github the filter has on top the comment: link

 * Allows to modify the default shortcode values if an attribute is missing in shortcode.
 * This will not change set attributes in shortcode.

so it is clear now – but why then the separator could be set on that example?

PS: that delay comes from the default transition timing:

.avia-icon-circles-icon-text {
  transition:all .8s cubic-bezier(.175,.885,.32,1.275);
}

it you set it to none – there will be no delay – see example page. But then not center image is shown.

#top .avia-icon-circles-icon-text {
  transition: none;
}