hm – the original size of your image: https://www.bureaureinasmallenbroek.nl/wp-content/uploads/2021/05/Gasterse-Duinen-4-bomen.jpg
it has a ProphotoRGB embedded – maybe that will cause the color shift on upload and recalculation to smaller images.

• This reply was modified 4 years, 7 months ago by Guenni007.

your color mode rgb is a sRGB profile or is it f.e. an adobeRGB.
– I used to work for museums and the color correct reproduction was always an issue.
Unfortunately, many of the images were also intended for printing, so I sometimes got a CMYK in the web upload.
Maybe that’s what happened to you with that one image without you realizing it, you failed to convert it to sRGB.
The standard RGB Profile is for Web – guess all browsers try to generate the image display according to this standard.
If i rember it well – the adobeRGB interpreted as sRGB looks a bit more magenta – especially the blue colors.

• This reply was modified 4 years, 7 months ago by Guenni007.

you have still some rules concerning to padding-top of #main in your css set to !important

you got this rule in your css:

@media only screen and (min-width: 787px) {
	#header_meta { display: none !important; }
	.html_header_top.html_header_sticky #top #wrap_all #main {
	    padding-top: 170px !important;
	}
}

the rule of a blank page layout :

#top.avia-blank #wrap_all #main {
    padding-top: 0 !important;
    margin: 0;
}

comparing the selectors – the first has one class more than the second – so it will win the game ;)
is the first rule a custom rule in your quick css ?

you can overwrite that rule by:

.html_header_top #top.avia-blank #wrap_all #main {
    padding-top: 0 !important;
    margin: 0;
}

BUT
The first rule is an enfold rule but not set to !important on default.
is there any reason to set it this way?

give this a chance ( remove the other code ):

html.html_av-framed-box {
  padding-top: 0 !important;
}

.av-frame.av-frame-top.av-frame-vert {
  height: 0 !important;
}

we can surround the weekday by some html with a class. Those extra letters had to be escaped.

Replace the whole code with:

function add_date_time_popup_content( $content ) {
	if ( ! function_exists( 'pum_get_popup_id' ) ) return;
	$popup_id = pum_get_popup_id();
	return "<p class='date-published'>" . get_the_date( '\<\s\p\a\n \c\l\a\s\s\=\"\w\e\e\k\d\a\y\"\> l \<\/\s\p\a\n\> \d. d.m.Y' , $popup_id ) . "</p>" . $content  ;
}
add_filter( 'pum_popup_content', 'add_date_time_popup_content' );

function show_date_of_popup(){
?>
<script type="text/javascript">	
(function($) {
	$(document).ready(function(){ 	  
		$('.pum-trigger').each(function() {
			var pumPopup = $('.pum').css('display');
			var trigger_name = $(this).attr('class').split(' ')[0];
			var publishingDate = $(this).closest('#top').find('#'+trigger_name+' .date-published').html();
			var date_published = $('<span class="puplished">'+publishingDate+'</span>');
			$(this).append(date_published);	
		});
	});	
})(jQuery);	       
</script>
<?php
}
add_action('wp_footer', 'show_date_of_popup', 9999);

and put this to quick css:

.puplished .weekday,
.date-published .weekday {
	text-transform: capitalize;
}

EDIT: sorry didn’t see that you like to have that as popup – so read the next Answer
___________________
But if your visitors want to navigate further on your page – how do you want to offer that?

you can place a button for instance that will go back in browser history – just place a button and give a custum-class to it: goback
this to child-theme functions.php:

function go_back_button(){
?>
<script type = "text/javascript">
(function($){
  $('.goback').on('click', function(e){
      e.preventDefault();
      window.history.back();
  });
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'go_back_button' );

if you like to have some binding words in that date do it this way:
The backslash will show the code that it does not stand for the day but to have text here

'l \d. d.m.Y'

first you told me it is too long!

Replace the part of the function above:

function add_date_time_popup_content( $content ) {
	if ( ! function_exists( 'pum_get_popup_id' ) ) return;
	$popup_id = pum_get_popup_id();
	return "<p class='date-published'>" . get_the_date( 'l, d.m.Y' , $popup_id ) . "</p>" . $content  ;
}
add_filter( 'pum_popup_content', 'add_date_time_popup_content' );

that part: ‘l, d.m.Y’ is responsible for it:
see here foramting options: https://wordpress.org/support/article/formatting-date-and-time/

• This reply was modified 4 years, 8 months ago by Guenni007.

this in the code above

var trigger_name = $(this).attr('class').split(' ')[0]

will search for the classes – split the class list on spaces and will take the first class ( it starts at 0 )

this is what i got on the test:
( click to enlarge )

i got the id at the second position !

yes sorry – on my testinstallation i have first the pum-trigger class than the id
so i corrected the second code to split on [0]
( var trigger_name = $(this).attr('class').split(' ')[0]; this is different to my installation – you had to take the first part of the class list )

replace it

here is the solution to it:

remove the shortcode function so that you only have on child-theme functions.php:

// this is now the code to insert the popup publishing date - 
// all credits goes to a guy that helped me from wp-popupmaker : Mark Chaves !
function add_date_time_popup_content( $content ) {
	if ( ! function_exists( 'pum_get_popup_id' ) ) return;
	$popup_id = pum_get_popup_id();
	return "<p class='date-published'>" . get_the_date( 'd.m.Y' , $popup_id ) . "</p>" . $content  ;
}
add_filter( 'pum_popup_content', 'add_date_time_popup_content' );

//-----------------
// this is the known script
function show_date_of_popup(){
?>
<script type="text/javascript">	
(function($) {
	$(document).ready(function(){ 	  
		$('.pum-trigger').each(function() {
			var pumPopup = $('.pum').css('display');
			var trigger_name = $(this).attr('class').split(' ')[0];
			var publishingDate = $(this).closest('#top').find('#'+trigger_name+' .date-published').text();
			var date_published = $('<span class="puplished">'+publishingDate+'</span>');
			$(this).append(date_published);	
		});
	});	
})(jQuery);	       
</script>
<?php
}
add_action('wp_footer', 'show_date_of_popup', 9999);

here is a layout made for another participant : https://webers-testseite.de/steviger/

The Reverse Order is only to have the second column ( with that navigation in it ) on top in responsive case.

it correlates with scroll speed – so no animation / transition speed here.
Slower scrolling is the solution

or if you like this – maybe it is a satisfiing solution for you:

#top #header,
#top .av-logo-container ,
#top #header .av-main-nav > li > a,
.logo a, 
.logo a img {
  transition: all 3s ease !important;
}

Different Approach
Wenn wir die Pfeile innerhalb des content containers setzen laufen Sie ja mit der Verschiebung.
Dazu müsstest du dies hier in die child-theme functions.php setzen:

function popup_arrows_change() { 
?>
<script type="text/javascript">
(function($){
$(window).on('load', function(){
    $('.av-masonry-entry.lightbox-added').magnificPopup({ 
	    type: 'image',
	    mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
	    closeOnContentClick: false,
	    midClick: true,

	    gallery: {
	      enabled: true
	    },

	    callbacks: {
	      buildControls: function() {
	        // re-appends controls inside the main container
	        this.arrowLeft.appendTo(this.contentContainer);
	        this.arrowRight.appendTo(this.contentContainer);
	      },
	    },

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

und das ins quick css:

.mfp-arrow {
  margin: 0 -90px;
  margin-top: -55px;
}

.mfp-arrow:active {
    margin-top: -55px;
}

ABER: Wichtiger – richtiger wäre den Fehler zu finden.

welche Header Variante hast du gewählt?
bei normalen Header ( Logo im Kopfzeilenbereich – unter Enfold – Allgemeines Layout – “Logo und Hauptmenü” ) – sind die ausgeblendet:

.avia-menu-subtext {
	display:none;
}

wenn du die auf display : block setzt, werden sie angezeigt. – Die musst du dann nur noch stylen, denn viel platz ist ja nicht da.
Ist aber bei z.B. einem shrinking header nicht trivial !

Das ist eigentlich so wie Rikard oben schon anmerkte mit dem Link – nur bei “Sidebar links oder rechts” gedacht