Du kannst es mit einem Accordion auch gut hinbekommen ( mit nur einem Toggle ), und hast dann sogar im Element selber Einfluss auf die Animationsgeschwindigkeit. Ausserdem ist der Button ( so du denn einen möchtest ) wahlweise ober- bzw. unterhalb platzierbar.
Zugegeben das ist etwas sehr gestyled – aber hier siehst du mal beide Anwendungen nebeneinander:
https://webers-testseite.de/fold-unfold-toggler/

Du kannst bei dem Fold/Unfold überigens den Verlauf wegnehmen; musst dann aber die Höhe so abpassen das ein Zeile nicht angeschnitten wird.

.avia-fold-unfold-section .av-fold-unfold-container::after {
  background: none !important;
}

By the way – I know this might be a lot of work – but it might help us if your demos were also up to date with the latest Enfold version, at least the big last main demo (unfortunately the one from 2017).

as mentioned here you can add html code
you do not need to do that line by line ( but it shows you more clearly what $sub .= happens by means of that dot ) – the dot stands for adding some html

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
  $sub .= "<h1 class='logo-title'>";
  $sub .= "My Website Textlogo";
  $sub .= "</h1>";
  return $sub;
}

pay attention on usage of quotes – if you wrap the inserted html by double quotes – you had to use for classes, alt, href, title etc inside it single quotes.

I’m on a Retina display here and can’t test it under all eventualities – maybe you needed to remove that rule set:

@media only screen and (max-width: 1425px) {
  video {
    object-position: -335px;
  }
}

and find your own media-query setting for it maybe with more conditions like -webkit-min-device-pixel-ratio: 2 or min-resolution: 192dpi

maybe we start with :

@media only screen and (max-width: 875px) {
    video {
        object-position:-235px 
    }
}

It’s slowly becoming a paid service ;)

i uploaded it to your page – and added for that inline logo ( it is now not .logo img but .logo svg ) additional code.

It’s a very good approximation – not 100%, but reasonable at the maximum size of 300px (the small circular rings have become circles). This is also not visible in the large png file.

see

In general, if an image is to respond to screen width and completely fill the surrounding container, the container height must match the image’s aspect ratio.

you can see what happens if you force your desired behaviour by : object-fit: fill
https://media.kulturbanause.de/2015/07/css-object-fit.html

if your parent container height is set by the other content – you can have that behaviour but will distort your image.
You can decide to have that image on object-fit: cover and then shift the important parts of the image by object-position.

see here an object-fit: fill on “About me” with Eiffel Tower :
https://webers-testseite.de/freelancer/#about

the height is determined by the big content on the left side (first flex-cell) – you can not have responsive behaviour on that image by that condition.

if you set on that img now

#about img {
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

the Eiffel Tower will stay in the middle and container is filled with image – not stretched – but cropped

can you please make a decision if you like to have boxed layout or not.
You can see on my stretched layout that it is quiet simple to fullfill your needs. – but with boxed layout it is hard to get.
Now you got on you page stretched layout – so see below the css ruleset.

this is my layout on that example page with stretched layout:

https://webers-testseite.de/vuur/

try ( now just for that post : vuur5 to not have influence from other settings )

next question: why don’t you use the enfold options on adding video to color-section:

see with css code:
https://webers-testseite.de/vuur/

i can change that for you – but you should think about it if is a good handling of the site if 2/3 of the screen height on mobile devices are #head – and content (#main) only 1/3.

where is that page ( name is enough for me )

_________________

ok – your widget content gets bigger – than new settings are needed:

again search for the entries in quick css and change those values:

/* declarations inside these comments had to be changed  */
/* and missing declarations had to be added to the existing ruleset */

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
    /* padding-top: 420px !important; */
    padding-top: 550px !important;
  }
}

@media only screen and (max-width: 989px) {
  #header .inner-container {
    /* grid-template-columns: 3fr 1fr; */
    /* grid-template-rows: 50px 1fr; */
    /* padding: 20px 0; */
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 160px 1fr;
    padding: 0;
  }
  .responsive.html_header_top #top #main {
    /* padding-top: 400px !important;  change to new value*/
    padding-top: 550px !important;
  }
  #header .inner-container {
    /* margin: 15px 0 0;  so just erase that rule*/
  }

  #header .inner-container .logo a, #header .inner-container .logo img {
    height: 300px !important;
    max-height: 300px !important;
    /* width: auto; */
    width: 300px !important;
    max-width: unset;
  }
}

ps – is that a wise decision to have such a big header area for mobile devices?

i understand – but what about showing me the demo-page what was the base of your page.
f.e.: https://kriesi.at/themes/enfold-law/practice-areas/#av_section_2 – and my question if it is a background-image or as an image element?

this is inside the zip file downloaded from Google:

so you see the variable fonts – and inside the static folder the other fonts.
Enfold can handle both – but you had to upload them separately. So unzip that file – the varible fonts put in a Folder f.e. Petrona-variable and pull out that zip file the static folder and rename it to Petrona
zip these two folders ( on Mac do not include Mac Meta data ). Now these zip files are ready to upload. Make a decision what you like to use.

For testing purpose – if you only need 100,400,700 download: Link
and here is the variable font: Link

First test only the static fonts. Normal users rarely know how to use a variable font ;)

Enfold font manager:

Choose your font then in General Styling – Fonts – at the end of the list there are the uploaded fonts

the above problem may have nothing to do with this, but you are aware that the downloaded Petrona.zip contains both static and variable fonts.

Google Petrona is one such variable font. The zip file you download from Google contains the variable font files and the static font files in a subfolder. Enfold also supports the use of variable fonts – but you need to upload them separately.

Now you has to decide if you like to use both – and the static font files as fallback solution ( that needs some additional conditional querries ) – or to use one kind of font file.

The static fonts contain a large number of styles (from 100 to 900 – regular and italic); you may want to make a selection here.

Ja, mit deiner Schrift hat die Umstellung jetzt funktioniert.

behalte deine als Lizenznachweis für Dich.