btw. just for info:
raleway is one of those google fonts that could be used with variable font option – if you are loading that font by yourself. Best would be to load it local.
Some nice info on that: https://web.dev/variable-fonts/

if you have done that – it will be possible to have styles like:
f.e.

h1 {
line-height: 1.7em;
font-size: 3.8em;
font-variation-settings: "wght" 443;
}

you can download this varialble font on google fonts: https://fonts.google.com/specimen/Raleway?query=Raleway – but these fonts are ttf fonts.
it is a little bit tricky to convert those downloadable files to woff2 fonts under preservation of those varialbe fonts options. But there are good converter tools in the net.

Vimeo Video
in Action: https://webers-testseite.de/pureinstall/oswald/

what about the header settings at Enfold – Header – Header Layout
it sounds for me as if you only want to have a smaller header ( you have now the standard header height of 88px – setup a custom pixel value with less height)
( click to enlarge : )

jQuery(window).load(function(){
	jQuery('.open-popup-link').addClass('no-scroll');
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('body').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('body').css("overflow-y", "auto");
			},
		},
	});
});

then it is scrollable on mobile devices – for desctop the scroll of background is hampered – but on mobile you can scroll

is it an icon-grid element?
if so – give a custom class to this element f.e.: insert-logo

then insert this to your child-theme functions.php:

function insert_logo_to_tooltip() { 
?>
<script>
(function($){
   $('.insert-logo .avia-icongrid-text').append( '<p><img class="aligncenter" src="/wp-content/uploads/logo.png" alt="YourLogo" width="40" height="40" /></p>' );
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_logo_to_tooltip');

on src put in your link to your logo.

small things would still be worth mentioning.
For large popups with lots of content, on mobile the html attribute overflow-y : hidden causes you to have no chance to scroll through the popup.
You can avoid this by assigning this attribute to the body tag and not to html

i had on one installation the same due to update WP5.6:
https://kriesi.at/support/topic/problems-after-updating-to-wordpress-5-6-read-this-first/

i’m participant as you – no Private Content for me – sorry then you had to wait til mods are here

that was the final code:

that is what you have now:

jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('html').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('html').css("overflow-y", "auto");
			},
		},
	});
});

replace it with:

jQuery(window).load(function(){
	jQuery('.open-popup-link').addClass('no-scroll');
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('html').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('html').css("overflow-y", "auto");
			},
		},
	});
});

ok – read my edit above

The class dots will be added by Enfold : input all custom classes without that dot.
If you like to add more than one class – just insert them separated by a space f.e. : class-a class-b class-c

yes – and that is a part of the smoothscroll function on avia.js …

jQuery(window).load(function(){
	jQuery('.open-popup-link').addClass('no-scroll');
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('html').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('html').css("overflow-y", "auto");
			},
		},
	});
});

that works for me

_____________

i tried to implement as magnific popup described with callback and beforeOpen –
but that will not work on first click – but our trigger class see above will do the job better

that part

callbacks: {
	beforeOpen: function () {
		(this.st.el).addClass('no-scroll');
		$('html').css("overflow-y", "hidden");
	},
	close: function() {
		$('html').css("overflow-y", "auto");
	},
},

• This reply was modified 5 years ago by Guenni007.

where did that function come from:

function(e) {
  var current = link.find('img:first'),
    _self = current.get(0),
    outerH = current.outerHeight(),
    outerW = current.outerWidth(),
    pos = current.position(),
    linkCss = link.css('display'),
    overlay = link.find('.image-overlay');
  if (outerH > 100) {
    if (!overlay.length) {
      overlay = $("<span class='image-overlay " + span_class + "'><span class='image-overlay-inside'></span></span>").appendTo(link);
    }
    if (link.height() == 0) {
      link.addClass(_self.className);
      _self.className = "";
    }
    if (!linkCss || linkCss == 'inline') {
      link.css({
        display: 'block'
      });
    }
    overlay.css({
      left: (pos.left - overlay_offset) + parseInt(current.css("margin-left"), 10),
      top: pos.top + parseInt(current.css("margin-top"), 10)
    }).css({
      overflow: 'hidden',
      display: 'block',
      'height': outerH,
      'width': (outerW + (2 * overlay_offset))
    });
    if (cssTrans === false) overlay.stop().animate({
      opacity: opa
    }, 400);
  } else {
    overlay.css({
      display: "none"
    });
  }
}

it is on that click event too

i can see in your sourc code of that page: https://per-vurt.com/dj-music-production-school-lebanon/
( click to enlarge:)

so you used ismaels code above – replace it by:

jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				jQuery('html').css("overflow-y", "hidden");
			},
			close: function() {
				jQuery('html').css("overflow-y", "auto");
			},
		},
	});
});

and remove from your css:

.mfp-wrap ~ #wrap_all {
    position: fixed !important;
}

The predesigned child ( link ) theme has never actually changed. Therefore, you can leave this folder unchanged. The child theme css settings are saved in the Uploads ( … dynamic_avia ) folder. The entries like snippets etc. in the functions.php are saved in the child theme folder functions.php. Therefore it would be very unwise to overwrite the functions.php of the child theme.
Of course, what can happen with such a big difference in versions is that you would have to revise the functions.php of the child theme, because filters might have changed etc.

Some installations have in the child-theme folder additional or edited Enfold Files ( f.e. header.php – or in the child-theme/shortcodes folder edited advanced layout builder php-Files ). These Files had to be adopted to the new versions. But these Files had to be uploaded by the one who has installed the theme on your side. Enfold does not do that on a normal installation itself.

For the update of the parent theme I recommend :

Update via ftp.

• Download the” installable wordpress file only” zip file
• Unzip that file and rename that unzipped folder to enfold-new
• Upload that enfold-new folder to your themes folder
• Rename your existing enfold folder in themes to f.e. enfold-old
• Rename the uploaded enfold-new folder to enfold
• Now you have switched already to the new version
• Check if all your existing settings work to your full satisfaction.
• Yes – then stop here

• No – rename back the enfold folder back to enfold-new
• rename the enfold-old folder back to enfold

the benefit of that procedure is
– that you have a backup of the previous version for a rollback, if it is needed.
– Ideally, the downtime is limited to the time it takes to rename these two folders on the FTP.

• This reply was modified 5 years ago by Guenni007.

on top you have a 1/1 container
then the grid row
then a color-section

so the 1/1 element before is different to that what you inserted after the grid row
a color-section got those 50px left/right padding

Since we have a portfolio page here in your test site, it is possible to work using full-width elements ( like color-sections, grid-row ), but is it advisable?
If you plan to position sidebars on these pages (portfolio or posts), they would be displayed below the full-width elements.