First to be clear what is your setup:
You got a grid-row and like to have in one grid-cell an image and in another one a link to a film ( youtube, vimeo etc.) both should open in lightbox.

“And on another column I would like…” then you are talking about columns .
So please be more precise in your question.

here i got a grid-row –
first grid-row:
on the left there is in it an easy-slider with one image and lightbox setting.
on the second cell i placed an image with video link ( video url with iframe=true option )
with this setting lightbox gallery will work

second grid-row:
on the left there is in it an easy-slider with one image and lightbox setting.
on second cell i placed a video alb with lightbox open option (Enfold newer than 4.6.3)

https://webers-testseite.de/gridrow-links/

or maybe you can try a different hook for the widget-area! Then maybe shrinking of the container could be reached too.
if you use ava_after_main_menu as dynamic_sidebar it will be part of the logo container.
you created the widget-area by functions.php
as mentioned above you can do it this way instead. But you had to style it completely again from the beginning. As part of the inner container of logo surrounding container it will be influenced by shrinking too.

add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
  dynamic_sidebar( 'header' );
}

der link zu der ID geht dann über den #-link muss also auch im Menu auftauchen. Wobei die Seite auch eindeutig sein muss.
Befindet sich die Sprungmarke also auf einer Unterseite, muss die mit benannt sein – kann allerdings auch relativ gehalten sein:
leg dann also einen idividuellen Link im Menu an

https://netventure.at/dolmetschen/#praesentation oder /dolmetschen/#praesentation

PS : ich würde auch Umlaute vermeiden, und Groß/Kleinschreibung ebenso. – Beim Einsetzen in die Developer ID Felder wird zB alles auf Kleinschreibung umgesetzt.

have you pagespeed ninja installed? ( or a different caching tool )
If so try not the libxml html parser ( it is in experimental mode still )

what do you think could be done if there is an additional height on top of 30px ? …
( it is now translateXY – and that is shortend to translate( x, y) )

@media only screen and (min-width:990px) {
 .av-section-bottom-logo.header_color {
  position:absolute;
  z-index:5;
  left:50%;
  -webkit-transform:translate(-50%, 30px);
  transform:translate(-50%, 30px);
  background:rgba(255,255,255,0) !important;
 }
}

you don’t adjust the logo for between 768px and 990px – thats a wanted variant – or have you forgotton to add this rule:

@media only screen and (min-width:768px) and (max-width:989px) {
	.html_header_top.html_logo_center .logo {
		left: 0;
		-webkit-transform: none; 
		-ms-transform: none;
		transform: none
	}
}

yes Mike’s advice is best and safest way:
https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107

ok now i see.

but maybe you make the shadow a bit more intense for it:

.popup_content--2JBXA {
    box-shadow: 0px 10px 75px 0px rgba(0,0,0,0.50), 0px 10px 50px 0px rgba(0,0,0,0.5);
}

so a different way – elegant but more work to do is to register your own mobile menu

on your screenshot we do not see the selector (the element ) to what the box-shadow should go.
I suppose there is no-one.

something like

.flex_column.av_one_third {
      box-shadow: 0px 10px 75px 0px rgba(0,0,0,0.10), 0px 10px 50px 0px rgba(0,0,0,0.15);
}

_________________________

By the way – but Off Topic – if you have found a way to show on a page a pdf – ;) i’m interesting too

the only way i know is via javascript to render a pdf on websites.
or to embed them like this:
<embed src="https://example.com/the.pdf" width="100%" height="800" type="application/pdf">

but chrome and android do not support this anymore.
Edit: it seems that this is still supported by chrome
Alternative you can use the google pdf viewer to show pdfs on website:
<embed src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://example.com/the.pdf" width="100%" height="800">

or try this in child-theme functions.php
(the filter is part of WordPress template.php on function get_post_states( $post ) )
(you can include not to show draft and password protection too – but i think this is usefull to have)

function remove_post_state( $post_states, $post ) {
  if("! has_blocks( $post->ID )") {
    unset($post_states['wp_editor']);
  }
  if("!= Avia_Builder()->get_alb_builder_status($post->ID)") {
    unset($post_states['avia_alb']);
  }
return $post_states;
}
add_filter('display_post_states','remove_post_state',999,2);

First go to enfold options : layout builder and select your needed settings – my advice do activate all three custom id and classes and selecting the header tags.

but for headings element – you don’t need to do that – here the choose of heading tag is still activated without those settings:

but with the settings above you will have on a lot of other alb elements the possibility to choose headings tag! f.e. iconbox etc. pp:

on base css line 379 there is :

.special_amp{
font-family: "Baskerville", "Palatino Linotype", "Palatino", "Times New Roman", serif; 
font-style: italic; 
font-size: 1.3em; 
line-height: 0.5em; 
font-weight:normal;}

and on functions-enfold.php there is the function: avia_ampersand
to rule the substitution. ( it set the ampersand sign between span tags with class: special_amp
By the way if you gave that custom-class: special_amp to a whole text-block it will show you that styling.

so a lot of users have the problem to get rid of it than to have the style.
And : Baskerville is not a good Websafe Font – so it might not be seen the substitution on older Win Systems: https://www.cssfontstack.com/Baskerville

Yes – i know that this is not caused by Enfold (alone) but even on wordpress themes ( twenty-twenty etc.) the script-src and style-src had to be set to unsafe-inline.
But i do not see why. Is it the customizer script that is implemented in a “wrong” manner?

@ismael : i do not understand how this could work: if(!title) title = item.el.parent().next('.wp-caption-text').html() if there is no wp-caption-text in the page.

and @daniel – if you have on your descriptions html code like bold text or something else you might take .html() instead of .text()

This is a bit more than you like to have but it shows you how you can have influence on different settings using Enfold specific classes – and even you can change the markup for lightbox on that
my example page is on id: 36548 so if you want to have that globally – get rid of if-clause
look to this example code:

function popup_masonry_gallery() { 
if(is_page(36548)){
?>
<script type="text/javascript">
(function($){
$(window).load(function(){  
    $('a.av-masonry-entry.lightbox-added').magnificPopup({
    type: 'image',
		image: {
        titleSrc: false,
        markup: '<div class="mfp-figure">'+
                  '<div class="mfp-close"></div>'+
                  '<div class="mfp-top-bar"></div>'+
                  '<div class="mfp-img"></div>'+
                  '<div class="mfp-bottom-bar">'+
                    '<div class="mfp-title"></div>'+
                    '<div class="mfp-counter"></div>'+
                  '</div>'+
                '</div>',
    },
    mainClass:          'avia-popup mfp-zoom-in mfp-image-loaded',
    closeOnContentClick:  false,
    midClick:         true,

    gallery: {
      enabled:      true
    },

    callbacks: {
		markupParse: function (template, values, item) {
			values.title = item.el.find('img').attr('alt') + '<br>' + item.el.closest('.av-masonry-entry').find('.av-masonry-entry-content').text();
		},

		// this - is Magnific Popup object.
        change: function() {
            $(this.content)
                .find('.mfp-top-bar')
                .html(
                    '<h2>' +
                        $(this.currItem.el).attr('title') +
                    '</h2>'
                );
        },
      	buildControls: function() {
	        // re-appends controls inside the main container
	        this.arrowLeft.appendTo(this.contentContainer);
	        this.arrowRight.appendTo(this.contentContainer);
      	},
    },
  }); 
  // close the iframe window
  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }}
add_action('wp_footer', 'popup_masonry_gallery');

first i get my selector – as on enfold it is the class lightbox-added
then i declare a new markup for that popup with f.e. a top-bar
on the callbacks i set the mfp-title to the image alt attribute and in the second line i look for the enfold description place – and get the text from: av-masonry-entry-content
in the new top-bar i place the img title as mfp-title !

see result: https://webers-testseite.de/lightboxes/

click the first image – you will see where the texts comes from in that new markup

Important: The captions had to be shown on that masonry in the enfold options dialog – otherwise they are not in the markup.
so if you do not like to have the visible set the figcaption to display none.

.mfp-top-bar h2 {
    color: #fff;
    font-weight: normal;
}

.page-id-36548 .av-inner-masonry-content {
    display: none;
}