as participant – i do not see your page – so hope Mike has a good idea. But keep in mind: better to place them fixed and to position them all top left.

And you only trust Mods ?

function ava_g_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->  

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action('wp_head', 'ava_g_tag_custom_script');

the reason why this fails – is that a lot of participants do not use the code tag on posting snippets here : https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/#post-1473588

can you test if the setting on : SEO Support – Search Engine Optimization Support – Meta Tag “robots” : Use Enfold default settings.
clear cache and merging and look if it is still there. If not then your SEO external Plugin is causing it.

The new robots tag, indexifembedded, works in combination with the noindex tag only when the page with noindex is embedded into another page through an iframe or similar HTML tag, like object. For example, if podcast.host.example/playpage?podcast=12345 has both the noindex and indexifembedded tag, it means Google can embed the content hosted on that page in recipe.site.example/my-recipes.html during indexing.

But as menitioned above – i do not have that on any enfold page. This is something that might come from a plugin.
the one and only place where Enfold places a noindex is in function-set-avia-frontend.php lines 466ff in the function: function avia_set_follow()
and this is just for the <meta name=”robots” …/> for is_search

a indexifembedded is completely not found in enfold folder ! if this setting comes from enfold it has to be mentioned in the source code.

Can you test please:

put this to your child-theme functions.php:

add_theme_support('avia_show_alb_responsive_image_option');

after that open your masonry element and look to advanced tab – performance : do not use responsive images.
This i hope will end in showing the original image instead of the smaller calculated images.

On styling tab choose (just for testing purposes) “no scaling (original width…)” now see if the uploaded images are yellowish too.
If not then there went something wrong on recalculating the smaller (for responsive purpos) image formats.

maybe put this to child-theme functions.php to show original images in lightbox:

function custom_alb_lightbox_image_size( $size, $context ){
  if( $context == ('av_gallery' || 'avia_masonry') ){
    return 'original';
  }
  return $size;
}
add_filter( 'avf_alb_lightbox_image_size', 'custom_alb_lightbox_image_size', 10, 2 );

If this shows now in masonry and on lightbox the well saturated images – then you can use once the plugin : https://wordpress.org/plugins/force-regenerate-thumbnails/ and recalculate all images. This i hope will correct the mismatch. After recalculation you can delete that plugiin from your installation.

did you really read my post and followed the link i offered?

@mike – it is as mentioned just before head tag is closing. But i do not have it on any of my enfold installations even on those which are in combination with Yoast SEO.

but nevertheless in combination with that “new” indexifembedded it is ok :
https://developers.google.com/search/blog/2022/01/robots-meta-tag-indexifembedded

nice to see the page now – then it is much easier to give advice.
First – why do you use the image as background? – use it as image element inside that column.
Best would be to give a custom class to that flex-column with your image.

to see an interims result – that could be done:

@media only screen and (min-width: 768px) {
  .flex_column.av-cvo-a82f70a62f8490e3b0b75af0c90996f9 {
    position: absolute;
    bottom: 0
  }
}

But: i guess we can have better results if you do not use the equal height option! because in responsive case the height of those containers are too big.
So can you please give to the flex-column with that image a custom class and remove the equal height option – then i check if there is a better solution for every screen width.

See example with css code : https://webers-testseite.de/greg/

i guess – as the frames – it will be better for positioning to choose display : fixed
I don’t know how the vw unit reacts to the scroll bar thickness. However, it seems to be the case that this must unfortunately be taken into account. For this reason alone, it is important to align all four pseudo containers to the top left.
for the mentioned Demo this works in all browser i do have on my Mac (FF dev, FF, Safari, Chrome)

.av-frame:before,
.av-frame:after {
    pointer-events: none;
    display:block !important;
}

.av-frame.av-frame-top.av-frame-vert:before {
    content: '';
    left: 30px;
    top: 30px;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-top: 1px solid #102f5d !important;
    border-left: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-right.av-frame-hor:before {
    content: '';
    left: calc(50vw - 8px);
    top: 30px;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-right: 1px solid #102f5d !important;
    border-top: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-bottom.av-frame-vert:before {
    content: '';
    left: calc(50vw - 8px);
    top: 50vh;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-right: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-left.av-frame-hor:before {
    content: '';
    left: 30px;
    top: 50vh;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-left: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: fixed;
}

if you got a different frame width than 10px we had to adjust some settings.

@strumpumpel:

Guenni007 so great for your fast help!
Arrr … i don’t usede the code tag …. :(
Sorry total!
Bist Du Deutscher?

Ja – der andere Beitrag ist schon zu.

btw. if you use on your landing page the advanced layer slider element – it is hard to get good loadiing times.
not least because the slider needs to be time-controlled to load the content. That’s the point behind it. So if you see my test page, the slider is set to show the entire content after approx. 7 seconds.

if you got an advanced layerslider on your landing page – then it might be usefull to play a bit with the advanced layerslider performance settings:
there is on “layerslider first window” on top right a gear icon which opens the settings dialog for gloabl settings of layerslider.
If you have opend one slider – you got on the top left “Project Settings” here are the performance settings for the specified slider.

the signs of <!-- Google Tag Manager --> are not right – and you used instead of two single quotes on one place one double Quote
(here after that part : …'dataLayer'?'&l='+l: )

it is very hard to check your codes – if you do not use here the code tag

easiest way is to click once the code tag button – enter your code – click again the /code button
because sometimes it is only the use of uncorrect quotation marks. etc.

can you try in child-theme functions.php:

add_filter( 'avf_post_ingnore_featured_image_link', '__return_true' );

can you link to one image example ?

and by the way 9400×400 – really? can you link to one of those big images.
WP has for media library a dimension threshold at 2560px – so if bigger dimensions are uploaded a new source will be generated with : filename_scaled.

What color profile did you choose on photoshop export: – did you check to have rgb export?

if you use both options this should work. But if only fill color is different then it might not be necessary to use them both – as you can see on my example page.
If you use both: look with a good text editor (for windows : notepad++ or for mac : sublimetext ) inside both svg files – there are the same classes used – as usually by illustrator – these are the st0, st1 etc.

Now the transparency logo comes later in the DOM – so this fill rules inside the transparency logo rules the css for st0.
Or aslong your external css does not differ between both logo files – these rules are woring on both files.
The one for non transparency case is ( .avia-svg-logo > a > svg ) – and the one for transparency is at ( .avia-svg-logo-sub > svg )

Yes – send me the link to your page via e-mail. Everything is under my nick.