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 4 years, 6 months 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 4 years, 6 months 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.

Link: https://wordpress.org/plugins/regenerate-thumbnails-advanced/

My lesson learned from all this: If you really know something about image optimization, it is sometimes better to embed the original image. Even if performance tools like Gtmetrix complain about browser scaling. The real benefit of those recalculated and cropped files is – that the aspect ratio fits better to f.e. a slider on top – and so you will have more control over the presented image section

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

Summary

// new snippet to set the compression level of calculted images
add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) {
	$quality = 65;   // compression level what you like in percent
	return $quality;
}

// Snippet to exclude Enfold Image Thumbnail-Formats from generation
add_action('init', 'remove_enfold_image_sizes');
function remove_enfold_image_sizes() {
//  do NOT remove widget size, is used in backend portfolio items!
//  comment out what you do not like to preserve as available thumbnail size
//	remove_image_size('widget');
	remove_image_size('square');
	remove_image_size('featured');
	remove_image_size('featured_large');
	remove_image_size('portfolio');
	remove_image_size('portfolio_small');
	remove_image_size('gallery');
	remove_image_size('magazine');
	remove_image_size('masonry');
	remove_image_size('entry_without_sidebar');
	remove_image_size('entry_with_sidebar');
	remove_image_size('shop_thumbnail');
	remove_image_size('shop_catalog');
	remove_image_size('shop_single'); 
	remove_image_size('shop_gallery_thumbnail');
}

after that you can use that plugin from shortpixel to recalculate all Images

nice tool: because if you got a very big uploads folder with a lot of jpgs – you can use the advanced option by “deselect all” and “delete unselected Thumbnails” – then only the original images stay in uploads folder – save it for backup and then recalculate them to have what you like to preserve

left is original / right is compressed image with 55% compression level
only a little color difference is there – guess my uploaded original has implemented the rgb color profile. i do not know if recalculated Images do have implemented Profiles too.

to get rid of calculated images the snippet in https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1270140 “// Disable loads of Enfold & WP image sizes upon upload …”
will do a good job without a plugin.

by the way: no PC for PartiCipant

just a moment – i will place a layerslider to see what we can do:
just give to the color-section a z-index and a relative position ( on my end the layerslider got 35 ) so :

.reverse-order {
    z-index: 50;
    position: relative;
}

see example-page: https://webers-testseite.de/steviger/

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

simple way : give a custom-class to the column that should shift up f.e.: shift-up
https://webers-testseite.de/steviger/
then insert this to your quick css:

@media (min-width:768px) {
  .flex_column.shift-up {
    position: relative;
    top: -150px;
  }
}

if you have on top an advanced layerslider – it maybe necessary to give a higher z-index to that container.
And you can use the animations on that columns as you see in the example pages.

or use the flexbox model:
maybe this helps you : https://webers-testseite.de/overlap-to-followed-section/