First : this is not the enfold implemented magnificPopup lightbox. Next: what is wrong with those iframe popups? What you like to see or rule for those lightboxes?

you had to know the aspect ratio of your bg-image. then you can calculate the height of that section in relation to 100vw of width.
f.e. if your bg-image is a 16/9 image – then the height should be 56.25vw. So you can force the height to be of that height of the image.

This will work if your content does not grow over that height.
See an example here: https://webers-testseite.de/colorsection-responsive/

Everything you need is already available in Enfold. You are not forced to use an additional plugin. If you are the licence holder (including web font usage), you can convert and use your desired font f.e. by : https://transfonter.org/
my recommendation is to generate woff2 and as fallback solution the ttf fonts.
The downloaded zip file could be used allready by enfold Font Manager, but however, I would only advise you to rename the zip file. In the Enfold Font Manager, the name of the zip file will appear as the font name (the css font name is not affected by this, it is generated from the font itself).

on default – the padding-top for transparency header setting is set to zero ( padding-top: 0 ) – check if you have a different setting on your page.
Maybe your header is transparent – but there is no content under that area ;)

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