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?

Yes – but i would advice you to have “buttons” on small screens underneath each other.

if you know how to insert the shortcode here is the shortcode of that layout:

[av_layout_row border='' min_height_percent='percent' min_height_pc='35' min_height='0' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-jz6fxoy1' custom_class='']
[av_cell_one_third vertical_align='middle' padding='30px' padding_sync='true' background='bg_color' background_color='#38a8da' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='manually,#' linktarget='' link_hover='' mobile_display='' av_uid='av-jz6fvtyh' custom_class='']

[av_font_icon icon='ue84d' font='entypo-fontello' style='border' caption='' link='manually,#' linktarget='' size='40px' position='center' animation='' color='#ffffff' av_uid='av-jz6fyjec' custom_class='' admin_preview_bg=''][/av_font_icon]

[av_heading heading='— Renting Process —' tag='h2' link_apply='' link='manually,http://' link_target='' alt_attr='' style='blockquote modern-quote modern-centered' size='' subheading_active='' subheading_size='15' id='' margin='' padding='10' color='custom-color-heading' custom_font='#ffffff' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-1fveu9n'][/av_heading]

[/av_cell_one_third][av_cell_one_third vertical_align='middle' padding='30px' padding_sync='true' background='bg_color' background_color='#a7a7a7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='manually,#' linktarget='' link_hover='' mobile_display='' av_uid='av-jz6fvyc9' custom_class='']

[av_font_icon icon='ue80b' font='entypo-fontello' style='border' caption='' link='manually,#' linktarget='' size='40px' position='center' animation='' color='#ffffff' av_uid='av-jz6fyjec' custom_class='' admin_preview_bg=''][/av_font_icon]

[av_heading heading='— Sellers Guide —' tag='h2' link_apply='' link='manually,http://' link_target='' alt_attr='' style='blockquote modern-quote modern-centered' size='' subheading_active='' subheading_size='15' id='' margin='' padding='10' color='custom-color-heading' custom_font='#ffffff' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-16oz9iz'][/av_heading]

[/av_cell_one_third][av_cell_one_third vertical_align='middle' padding='30px' padding_sync='true' background='bg_color' background_color='#e83947' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='manually,#' linktarget='' link_hover='' mobile_display='' av_uid='av-jz6fw4u3' custom_class='']

[av_font_icon icon='ue821' font='entypo-fontello' style='border' caption='' link='manually,#' linktarget='' size='40px' position='center' animation='' color='#ffffff' av_uid='av-jz6fyjec' custom_class='' admin_preview_bg=''][/av_font_icon]

[av_heading heading='— Buyers Guide —' tag='h2' link_apply='' link='manually,http://' link_target='' alt_attr='' style='blockquote modern-quote modern-centered' size='' subheading_active='' subheading_size='15' id='' margin='' padding='10' color='custom-color-heading' custom_font='#ffffff' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-kbfs1n'][/av_heading]

[/av_cell_one_third]
[/av_layout_row]

you can decide if you like to have column link or link on icon and heading ( you then must synchronize it)
looks this way: https://webers-testseite.de/pseudobuttons/

there are small borders (allthough this is not selected on grid alb element) these comes from width 33,3 % width if the width was defined as 33,33% it is not shown – but it might get in to problems on different browsers.
Easier to solve that problem is to give to the whole gird-row a the background-color of the middle column:

#av-layout-grid-1 {
    background-color: #a7a7a7;
}

Offtopic – one of my old requests – we need an ALB Element which reacts like a color-section ( as a container for different albs ) fullwidth but not pushing sidebar down but besides sidebar.
Or in other words an alb which reacts to the surrounding environment like a 1/1 container but inner behavior like color-section with drag and drop level 1 … that could solve a lot of layout idiosyncrasies

___________
this is a solution for a whole sticky sidebar ( aside ) …
now Ampower look here and scroll down the page – you see the sidebar is sticky as long the as possible – https://webers-testseite.de/buttons/
if you are interested in that solution i link you to that page here: https://kriesi.at/support/topic/an-actual-solution-to-a-sticky-column/#post-1124882

if you can’t transfer the solution to sidebar – i will tell you how.

this was the screenshot you gave me as you would like tlo have it:
my comment :

this has influence to the lines – add or change the existing rules to:

add new rules gave to you – change existing ones gave to you!

    ⇒         your last screencast

so all have right border – except the first row last column
where is that rule gone:

#header .avia_mega_div .units {
  border-right: 1px solid #010660 ;
}

On your screen there are no left lines to the first Columns

/* Nascondere per nascondere barra sinistra delle categorie OK */
#header .avia_mega_div .avia_mega_menu_columns_first {
    padding-left: 15px;
    border-left: none;
}

so you don’t like the border on the upper row right side – where is the new rule with the :not instruction:

#header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
    border-right: none !important;
}

on insertion into functions.php : replace it with:

function insert_mega_div_separator() { 
?>
<script>
(function($){
$('<div style="margin-bottom:10px;" class="hr hr-custom hr-center"><span class="hr-inner inner-border-av-border-fat" style=" width:80%; border-color:#010660;"><span class="hr-inner-style"></span></span></div>').insertBefore('.avia_mega_hr');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_mega_div_separator');

this has influence to the lines – add or change the existing rules to:

#top #header .avia_mega_div > .sub-menu {
padding: 20px 30px 10px;
}

.hr-custom .hr-inner.inner-border-av-border-fat {
    border-top-width: 1px;
}

#header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
    border-right: none !important;
}

Well, I almost had to help with that, didn’t I? ;)
now i’m out sorry – the next patient is already waiting.

btw: chrome on pc got the advantage that you can let the dropdown menus open when exploring them with a shortcut
believe it is F8

Safari on Mac did the trick without shortcut.