try :

@media only screen and (max-width: 989px) {
    #top .header_bg {
        background-color: var(--enfold-header-color-bg) !important;
    }
}

adjust media-query width to your needs

on your ngg page the content is limited to 1140px – enfold uses on that container a padding: 0 50px

so try:

.page-id-1562 #section-width .container {
  max-width: 1240px;
}

btw. enfold version looks better – because images are not cropped.

have a look if you have already the svg usage of those standard icons. – the up-open icon is already a bold one – but you can make it bigger:

#scroll-top-link svg {
  margin-top: 3px !important;
  width: 40px !important;
  height: 40px !important;
}

#scroll-top-link svg path {
  stroke-width: 2;
  stroke: currentColor
}

see :

btw: on mobile ( better on smaller screens it is set to display: none )

@media only screen and (max-width: 767px) {
  .responsive #scroll-top-link {
    display: block;
  }
}

The reason for this is that many people know that double-tapping the top of the screen scrolls the window upwards.

on your ngg gallery you are showing images !
on your test page : https://peter-test1.co.uk/portfolio-item/test/
you are trying to show portfolios? – why not showing images masonry or gallery instead? https://peter-test1.co.uk/gallery/
And btw. why do you removed the css for the gallery ? You like to show now the full-width?

see: https://kriesi.at/support/topic/responsive-issue/#post-1492074

yes – but you can even remove those empty columns ( left and right )

just place the “The Flight Of Dragons” the same way as the others – you do not need to fill up the last row with empty columns.

Do you really want it to be that narrow on small screens?
I would set the content differently to narrow. Therefore, remove:

#section-width {
  max-width: 50%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

and set instead:

#section-width .container {
  max-width: 750px;
}

And here’s the next layout tip.
I would place different design elements in different color sections.
So all gallery images in one section (#section-width) – including the single one that comes last – without empty columns – then the films below in a separate section.

If you have done that – i will give you a flex-box code to style your gallery.

Yes – but that downloaded zip file from fontsquirrel is not the neede zip for uploading it to enfold fontmanager.
You had to pull out the fontfiles into a separate folder and compress that folder for uploading.

use the font-manager of enfold – it works great – even for variable fontfiles

first – if you compress your font-files on a mac (OSX) it will include even the typically non visible files on OSX folder. This is what you see – when you are talking about Font: MACOSX ( font-family: macosx ).
But your font-file of berthold should be there too.

I do not know if fontsquirrel can convert otf files of variable Fonts to ttf or woff2.

just one moment – i’m looking for an older post of mine. …

https://kriesi.at/support/topic/how-to-submit-and-use-custom-fonts/#post-1470894

you can download that script app – just place it on your desktop – and drag & drop files there to zip.

Or use keka to compress your font folder. And do not include invisible files

after compression it should show inside that font zip file only the fonts – and nothing else:

have a look at: https://webers-testseite.de/woodnest/
i placed the styles and script as inline codes in a codesnippet.

there might be solutions if we have to put in one image column two content columns (f.e. 2/3 – 1/3)

maybe you can bring that arrow to your sub-menu container. But then you can not center it below top-level menu text.
But if you are satisfied by a fixed distance from the left (f.e. 20px ) this is a not so complex solution.

or you set the avia-arrow-wrap and avia-arrow to show- and fill with background-color and border-color.

even if it is not the current menu-item?

hm i did not try that because in class-avia-slideshow.php this parameter is missing on the array:

$video_data = apply_filters( 'avf_youtube_video_data', array(
	'autoplay' 		=> 0,
	'videoid'		=> $video_id,
	'hd'			=> 1,
	'rel'			=> 0,
	'wmode'			=> 'opaque',
	'loop'			=> 0,
	'version'		=> 3,
	'autohide'		=> 1,
	'color'			=> 'white',
	'controls'		=> $controls,
	'iv_load_policy'=> 3
));

but: as always, it only works muted.
Thanks Ismael – i will keep that snippet in mind. btw: then you can set an end time too:

add_filter( 'avf_youtube_video_data', function( $data ) {
    if( !empty( $data['videoid'] ) && $data['videoid'] === 'G0k3kHtyoqc' ) {
        $data['start'] = 15;
	$data['end'] = 40;
    }
    return $data;
});

However, the video behaves this way only when first called up. Once the slideshow has run through its first cycle, these settings are no longer taken into account. Furthermore, if you have selected autoplay, the video will be interrupted after the slider autorotation duration and the next slide will be called up.

if you like to have the pipes between the links:
adjust the new switch point when the links goto a twoliner:

@media only screen and (max-width: 467px) {
  #header {
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 

and for phone-info:

/******  styling the phone-info links with pipe separator  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  gap: 0 40px; 
}

#top #header_meta .phone-info a {
  flex:  1 1 auto;
  position: relative;
}

#top #header_meta .phone-info a:not(:last-child)::after {
  content: '|';
  font-size: 18px;
  position: absolute;
  right: -24px; 
  color: #FFF;
}

There is a lot more to think of.
First – to style the header_meta with your phone-info entries.
To prevent breaks occurring where it looks unsightly, it would be a good idea to replace your entries completely with this line:

<a style="white-space: nowrap" href="/over-ons/">Over Ons</a><a style="white-space: nowrap" href="/veelgestelde-vragen/">Veel gestelde vragen</a><a style="white-space: nowrap" href="#">Nieuws</a><a style="white-space: nowrap" href="tel:+31434551268">T: +31 (0)43 455 12 68</a>

after that we will see if the pipes are neccessary.

On mobile devices, these links become two lines—and this must also be taken into account with the padding-top of main.

After you have these new phone-info – remove your code from above and try:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }

  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 110px !important;
  }

  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }

  #header_main {
    border-bottom: none;
  }

  #header:not(.av_header_transparency) #header_main {
    box-shadow: 0 5px 10px #eee;
  }

  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }

  .responsive #top #avia-menu > .menu-item-avia-special > a {
    height: 80px !important;  ;
    line-height: 80px !important; 
  }

  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #FFF !important;
  }  

  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #FFF !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #FFF;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
}

@media only screen and (max-width: 767px) {
  #header {
    position: fixed !important;
    height: 140px !important;
    max-height: 140px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet #top #main {
    padding-top: 140px !important;
  }
}

@media only screen and (max-width: 435px) {
  #header {
    position: fixed !important;
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 
/****** End *************/

/******  styling the phone-info links  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 0 30px;
}