On Styling Tab :

but you can implement the attribute on css too:

.responsive-colorsection {
    width: 100vw !important;
    height: 56.25vw;
    background-size: cover !important;
}

you take your color-section with background-image.
Set the background-image to cover.
The color-section with custom-class f.e: responsive-colorsection
and : no minimum height – thats ruled by quick css

now you have to know the aspect ratio of your image ! mine on the testpage is nearly a 16:9 image
so if the image-width is 100% the height must be 56.25%

so:

.responsive-colorsection {
  width: 100vw !important;
  height: 56.25vw;
}

.responsive-colorsection .container {
  position: relative;
  top: calc(100% - 150px) !important;
}

for a more banner like image take a different aspect ratio image !
See example page from above.

btw.: I hope you have performance optimized the pictures with the same vigor ;)

hm – i see this on my iphone emulation developer tools:

isn’t that what you want?

The only missing is a rule for the header – because it is in position:fixed – it is not influenced by wrap_all

Try this instead:

@media only screen and (max-width:767px) {
  .responsive #top #wrap_all {
    margin-left: auto;
    margin-right: auto;
    max-width: 352px;
  }
  .responsive #top #header {
    position: fixed !important;
    max-width: 352px;
  }
}

if you only like to have that for mobile devices you can use the class on responsive : avia_mobile to be more selective:

@media only screen and (max-width:767px)  {
  .responsive.avia_mobile #top #wrap_all {
    margin-left: auto;
    margin-right: auto;
    max-width: 352px;
  }
  .responsive.avia_mobile #top #header {
    position: fixed !important;
    max-width: 352px !important;
  }
}

coming back to you – looks nice but there is one thing i would remark:

if you see the screen-width when the columns are 1/2 the top right is smaller due to inner content.

add to the one rule the width setting to 100%

#covid-beyond .flex_cell.cell-one .flex_cell_inner, 
#covid-beyond .flex_cell.cell-two .flex_cell_inner, 
#covid-beyond .flex_cell.cell-three .flex_cell_inner, 
#covid-beyond .flex_cell.cell-four .flex_cell_inner {
    display: flex !important;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;   
}

and have a look on the one media-query set on 930px
i guess for your setting it will be better to have this on 989px:

@media only screen and (max-width:989px) {
 #covid-beyond .flex_cell.cell-one,
 #covid-beyond .flex_cell.cell-two,
 #covid-beyond .flex_cell.cell-three,
 #covid-beyond .flex_cell.cell-four {
  flex:1 1 49%
 }
 #covid-beyond .flex_cell.cell-two .flex_cell_inner .flex_column {
  border-width:2px 0 0
 }
}

If you want to make it more perfect – maybe you can live with the 500 font-weight – then you had to load the 500 font-weight instead of the 700 one – and redeclare the css for all headings to 500.

Guess thats what Yigit now does for you.
Thats what i said.

Your title on the topic is wrong: with egual parameters – the parameters are not equal – thats the point.
Next time – migrate with duplicator – then you will have a 1:1 copy

For Enfold you do not need to implement the child in this way:
https://kriesi.at/documentation/enfold/child-theme/

As long as the child style.css has this on top:

/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://kriesi.at
Template: enfold
*/

everything works with this child style.css.
because parent-theme style.css is empty too. The styles of Enfold are loaded ( conditionally ) via functions.php.

this is what google dev tools for your sites:
( i do allways have extra windows instead of only sidebar look on dev tools in the browsers )

again – click to enlarge the image

Just for Info: ( not intended as a solution for you ) Oswald is one of the google fonts which have variable font-weights: https://web.dev/variable-fonts/

nice info video about new browser support on that since May 2020 : https://youtu.be/B42rUMdcB7c?t=30

so you can even import a 450 font-weight with f.e. 400 and 600
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;450;600&display=swap');

just looking for hs-form-required on google

Next Question – you like to have the smaller font-weight : 600 ? like on : http://www.brunocover.it/CMS/wordpress/trikego/

but there we have:

#top #wrap_all .all_colors h1,
#top #wrap_all .all_colors h2,
#top #wrap_all .all_colors h3,
#top #wrap_all .all_colors h4,
#top #wrap_all .all_colors h5,
#top #wrap_all .all_colors h6 {
 color:#24305e;
 font-weight:900;
 text-transform:uppercase
}

on the page where the black style is on you have 600 ?

It sounds a bit like you did the move of the hopmepage by hand. With transfer of the settings and css settlements etc.
I always migrate WordPress installations with Duplikator ( Link ) and never had to fear such problems.
Maybe you decide to take this step.

But first: tests you could still do –
Check if the settings in the “Advanced Settings” are identical.
If yes then try a backup of the settings data via Enfold – Import/Export : Export Theme Settings File and then the import in the new installation will bring a little more.

if your page is like this here: https://kriesi.at/themes/enfold/pages/contact/
you can include here the font-size too:

.main_color .required {
    color: #8E199D;
    font-size: 20px;
}

if it is in a placeholder you had to style the placeholder text. – is there a page to see the issue?

ich persönlich blende die Infos immer aus, welcher Editor für die die Seiten/Beitragserstellung zuständig war.
Lediglich Entwurf und wichtige Infos ( Datenschutzseite) lasse ich drin.

Legt mal folgendes in Eurer Child-Theme functions.php an:

/****  Die Poststates im Dashboard nicht anzeigen - wichtige schon *****/
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);

Das betrifft eben auch die Menus.
_________
Ansonsten sehe ich die Darstellungsprobleme nicht im Menu – lediglich das Laden der vollständingen Seite verhindert das zeitnahe Rendern der kompletten Seite – dadurch hatte ich auch zunächst Darstellungsprobleme eures Menüs.

Geht mal auf Gtmetrix und forscht mal nach, warum ihr soviele Requests habt :
https://gtmetrix.com/reports/www.institut-generationenberatung.de/Ng6GhVjP

Dann versucht doch mal das Merging von Enfold. Das stelle ich auch immer erst zum Schluss an, weil die vereinten js und css files während des layouts oft wie ein Caching wirken und das hält auf. Wenn die Seite allerdings dann steht, kann man das Anstellen.

______________
for non German participants here

Personally, I always hide the information about which editor was responsible for the pages/contributions.
Only draft and important information (data protection page) I leave inside.

Please look at the code above.

This also applies to the menus.
_________

Otherwise I don’t see the display problems in the menu – only the loading of the complete page prevents the timely rendering of the complete page – so I had display problems of your menu at first.

Go to Gtmetrix and find out why you have so many requests:
https://gtmetrix.com/reports/www.institut-generationenberatung.de/Ng6GhVjP

Why don’t you try merging Enfold? I always do this at the end of the layout because the merged js and css files often act like a caching during the layout and that stops. But when the page is finished, you can start the merging.

As mentioned above your favicon : http://www.downundermusic.com/wp-content/uploads/2019/01/favicon-16×16.png
tries to load from http and could not be found under this url.

Keiner!

Und wieso kannst du nicht einfach eine Antwort auf eine generelle Frage geben?

weil sowas hier für 95% der Mitstreiter hier an Board nicht hilfreich ist: https://developer.wordpress.org/reference/functions/get_bloginfo/
______
Wie du hier am Board Logo siehst, hat Kriesi eine Bildmarke und Text eingebunden.
Das tat ich zB. auch auf einer meiner Seiten: https://guenterweber.com
Man hat dann wie hier die Möglichkeit verschiedene Effekte noch auf diese anzuwenden ( siehe oben beim Shrinken )

Das kann man z.B. auch mit dem Seitennamen und der Beschreibung machen – wobei etwas css noch dazugehört diese dann richtig zu positionieren.:
das hier in die child-theme functions.php

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= "<span class='logo-title'>";
  $sub .= get_bloginfo( 'name', 'display' );
  $sub .= "</span>";
  $sub .= "<span class='logo-title logo-subtitle'>";
  $sub .= get_bloginfo( 'description', 'display' );
  $sub .= "</span>";
  return $sub;
}

wenn du es aber oben im Top-Menu links haben wolltest muss eine andere Lösung her etc. pp beides wäre auch als oben links zu bezeichnen, wenn das Logo links positioniert hast.

Daher mein Nachfragen. Mir war das zu allgemein um eine präzise Lösung anzubieten.