but i guess that this is not the publishing date of the pupup – but the date of the page where it is placed.
i do not know ( for now ) how to change that. Still brainstorming

see here from a demo page of popupmaker:

View post on imgur.com

yes but – now we have in the popup the correct date.

The trigger of the popup is correlated to a class give to the trigger-class in additon:

this “test” class ( on the others you gave 1,2,3 etc.) corresponds to a very complicated construct of that plugin as data attribute with slug:

we had now to find a way in an each function over all classes to find the publishing date in the corresponding popup and insert it the way above
by prepend.

The difficulty is to find the right selectors and to have a each function over all additional classes on those div.pum-trigger

What might be usefull is if on your popup the publishing date is noted ( you can set it to display: none if you like ) but it has to be in the DOM.
if you add this to your child-theme functions.php

function shortcode_for_publishing_date_of_posts(){
 return get_the_date();
}
add_shortcode( 'post_published', 'shortcode_for_publishing_date_of_posts' );

you can insert this shortcode to the post ( your popups ) by :

<span class="date-published">[post_published]</span>

now you will have on your popups the publishing date.

now i can see that there are classes given to the trigger : 1, 2, 3 etc. if i click the p tag with class 1 – the popup with a given data-popmake with slug=1 will open.

i will have a look if i can use that! – but it is first a manual insertion with that shortcode above. – If you do not want to do that – i see no chance to get it.

so can you do that on f.e. the first “Sony WH-1000XM4 headset bundle kampagne ” where there is now “10. marts 2021” with that shortcode – after that i can try on developer settings if my selectors will work.

@Sclark91 – his logo is a svg-logo – that is the point. If you see his edited logo now here : https://webers-testseite.de/Pioneer-Final-Logos_RGB-Green-03.svg and pull the screen height to smaller sizes – you see that it is shrinking to the left side of the screen. On default a svg does that center center.
The trick is to add this to the “head” section of the svg: preserveAspectRatio="xMinYMid meet"

@cloaker : your logo is a svg file too – you can influence the shrink behavior by adding some code to the svg itself. See above
Open in a good text-editor ( mac f.e. Sublime Text on win: notepad++) your logo. You will see on top a similar code.
Insert on that place ( with space between the surrounded code ) : preserveAspectRatio="xMinYMid meet"
xMinYMid means that on horizontal align it is minimized to the left – and vertical align it is centered
( pay attention the x is small letter – Y is with big letters )

PS: good text-editors do not insert or add meta infos to the texts. They do what they had to do and nothing else. ( in oposite to word ;) )

PPS: then you can forget about the negative margins – get rid of all that stuff – and see if there might be small adjustments – e.g. if your svg has a lot of space around the path in it.

PPPS: :) if your svg is generated in Illustrator : i do change the default classes to something else – because if you got more than one svg on that page and refill a path by its class – all .st1 etc. pp will be influenced. So to stay unique i do change it to something meaningfull. and different to “st” nomenklatura.

if that date isn’t listed in the DOM – from where should i take the info?
Now there is only one popup opening.

I did the same on the text block next to (a-j)

where do i see that – what is a-j
show it with screenshots where to find what you mentioned – show me in the DOM where to find that “publishing date”

the popup has a date and for the first popup it is 10. marts 2021 and that should be the date on the box?
Where is the info of which popup has to be opend? – Now it is always the same popup ! ?
When you have layouted it completely – that will be the time to discuss how to obtain that.
That should be possible because the popups are allready in the DOM.

you mean this date in the box:

if the lightbox is opend – the date in the box should be inserted of the current date.
So if you see my – test page click on the button- a lightbox is opend – and the current date is shown under the button in the box.
you don’t want to have the date in the lightbox added but in the source box where the link is clicked?

Show me the page it concerns

well – that happens occasionally – but it must have taken a mod to make you believe it. ;)

the only rule i see in your css that has a large min-width setting is:

@media only screen and (min-width:1800px) {
	.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry,
	.responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry {
		width: 16.6%
	}
	.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry.av-landscape-img,
	.responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry.av-landscape-img {
		width: 33.2%
	}
}

but that does not influence your cottages page.
i always have on your cottages page on larger screens a 4 column layout – and only under 990px it is a 3 column layout.

may i see your site?
____________
if you have a shrinking header – and an overlapping logo – you can use these two classes added on the header id. ( header-scrolled and header-scrolled-full)
See for example that page here: https://webers-testseite.de/header-im-off/
My header is set to a custom height of 140px – the relative height of the logo is the guarantee that the logo will follow the shrink amount.
my logo on that page is set to :

#top.page-id-39906 .logo a {
  max-height: 210px !important;
  height: 150%;
}
#top.page-id-39906 .logo, 
#top.page-id-39906 .logo a {
  overflow: visible;
}

so it is overlapping the header with 50% of its height
on normal shrink factor of 1/2 the logo will end on a height of 105px – my header_meta is set to scroll away – that will cause a margin-top of -33.5px
when this point is reached the class : header-scrolled-full is added.
From now on the header had to get a margin of 105+33.5 = 138.5px – so my solution is:

#top.page-id-39906 #header.header-scrolled-full {
  margin-top: -138.5px !important;
  transition: margin-top 1s ease;
}

#top.page-id-39906 #header.header-scrolled {
  transition: margin-top 1s ease !important;
}

in addition to that above – you can even set an order number for responsive case:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ : see on the right side there are the flex-item properties.

one important point is the included jQuery Version – which is now 3.5.1
The New Enfold 4.8.2 will run under these conditions. But if you are running a child-theme with a few functions.php snippets inside – it will be important to look if you have some functions in it with:

$(window).load(function(){
// which is now deprecated and should be replaced by:
$(window).on('load', function(){

// and same thing here - the 
.click(function(){
// now replaced by:
.on('click', function(){

i would try on a page where you have a good backup the way i’m talking above with dashboard and uploading the installable zip file of enfold.
This is probably the most time saving way.
The other way via ftp upload is the safest way, because you still have that rollback then.

and by the way – you load that custom ( inline popup ) script in the head section – not the footer.
You had to be sure that jquery and magnific popup script loads before this.
That could be one reason for “is not a function” – but the main point here is that the script itself ( magnific popup script ) isn’t loaded.