best would be to see the site link – if you can not make the link public – you had to wait til mods are here to help you – just set the link to private content field here on the topic.

well your idea to take the grid is ok i think.
if you want the grid-row not to be 100%width there are methods to obtain that.

dann wäre ein link zur Seite nicht schlecht um zu sehen warum es nicht gehen soll.

nein- deshalb meine Frage – du hast dort in dem Menu eingetragen , und auch save gedrückt?
( nicht übel nehmen, aber das vergessen manche schon – auch z.B. beim advanced layer slider ist unten auch ein Button der hie und da schon mal nicht betätigt wird )

just one moment – i did’t saw the test link in your starting thread.

To have a responsive Color-Section – you have to have a responsive Content ! – otherwise it will go out of the container.
Your bg-image is 1600/768 so an aspect ration of 48%

so you have to set your background-image to “contain” the image – but the height of the color-section should be 48% of width:
in responsive Case the 3/5th container should stay in this width or should be adjusted to your needs – enfold goes to have the containers under each other at a responsive width so to speek on 100% width:

see here the test page: https://webers-testseite.de/responsive-color-section/

.page-id-35548 #av_section_1 {
  width: 100vw;
  height: 48vw !important;
}

.page-id-35548 .flex_column.av_three_fifth {
  width: 58vw !important;
}

.page-id-35548 .flex_column.av_three_fifth .av-special-heading h1 {
  font-size: 4vw !important;
  line-height: 6vw !important;
}

.page-id-35548 .flex_column.av_three_fifth .av-special-heading .av-subheading {
  font-size: 3vw !important;
  line-height: 4vw !important;
}

.page-id-35548 .avia-button .avia_iconbox_title {
    font-size: 2.5vw !important;
}

.page-id-35548 .flex_column.av_three_fifth .av-special-heading h1 {
	font-size: 3.2vw !important;
	line-height: 5vw !important;
}
.page-id-35548 .flex_column.av_three_fifth .av-special-heading .av-subheading {
	font-size: 2vw !important;
}

you can do it via quick css f.e. to overwrite the vertical align : middle instruction

.page-id-35534 .slideshow_align_caption {
    vertical-align: top;
    top: 5vw;
}

on responsive case i go away from 100% container for caption and set it to:

.responsive #top.page-id-35534 .slideshow_caption {
    width: 60%;
}

( i did it only for that page )

btw: CSS Rule of Jordan should work – i guess you have Merging on so refresh the merged files on Enfold Performance

you can get rid of it via Enfold Options Page: Blog Layout:

hast du mal einen Link zum schauen?

Was ist mit diesem Rätselwort gemeint?

the quick and easy way: inserting a “soft-hyphen” manually that sign is ­ or : ­

so when filling out the title – insert this sign where the word can break! –
But you can not see it in your entered preview – but it is active.
And if you open that ALB again – the setting is lost.

the other method is to let the hyphens set automatically. But something like this:

.iconbox .iconbox_content .iconbox_content_title {
    word-wrap: break-word;
    hyphens: auto;
}

will often end up in word-break without dash ! this looks ugly.

my recomendation: do it manually with additon of a small enfold plugin.

Guenter here from the board has written a little plugin to insert into input fields of enfold special characters like bigger than or less than sings – quotation marks etc. – you can find that on : https://github.com/KriesiMedia/enfold-library/tree/master/integration%20plugins/Enfold/Special%20Character%20Translation

this could be installed like a normal plugin. Afterwards you can have tag signs or quotes etc. f.e. in tables or in heading input fields.
add that Line to the plugin:
'#shy#' => '­', so you can use #shy# for ­. or the same thing: ­

because i’m a lazy guy i only edited that plugin a bit – so that the list does not have three # before and after that translation part.
so my part of that looks like this:

sorry Boardsoft transfers directly the special characters to something else – even if it is in code tags:
so here is the image of it:

so you can use it like this:

and you can edit it again and again – you can see it in the preview where you have inserted it – but on Frontend:
https://webers-testseite.de/iconboxes-with-equalheight/

you mean that iconbox heading – or in the content text?

so you have set on text ALB Element in your text some h2 .
The best way could be to change to text view – then you see the tags set in html view.

you text may look like:
<h2> some heading inside </h2>

you can change it to:
<h2 style="custom-class"> some heading inside </h2>

then you can put in your quick css :

h2.custom-class {
font-size:2em
}

not all Advanced Layout Builder Elements ( ALB Elements ) have that input field for IDs – but most of them got the possibility to have classes.
If you haven’t already activated that fields – goto Enfold Options Page and look at: Layout Builder – mark : “Show element options for developers”
From that on you will have that extra input field on the ALB Elements.

Now the css code depends on the heading you like to change.
Are these headings from the headings ALB or h2 on sliders etc. pp.

Best would be to see the live page to give better advice.

or is it this you like to achive: https://webers-testseite.de/cynthia/video-under-header/
: a kind of watermark

insert to your slide an overlay : no color but an image – set transparency on it you like.
After that you can style it to be not as a pattern but as one image centered:
f.e:

 div .av-section-color-overlay {
    background-repeat: no-repeat !important;
    background-position: center center;
}

play with that background-position if you like –
first value is : background-position-x
second value is: background-position-y

i do not see your private content (i’m participant as you) but to solve that issue we had to see the site or have more details.
What kind of header you have ( logo left – menu right etc) ?
is it a fixed header or does it scroll away with content?
Does the content of that extra container have dynamic content or is it static and not often changed?
What should happen to that extra container on scroll?