That’s just a tangled web.
Another way to achieve this and in your case where it is now suddenly possible to publish the page link, the only chance is to imitate the iconbox.
Because you like to have an image background with heading on top. Then flex layout will not work properly.

Enfold provides the tools to give columns the same height. So why not use this tool to create an iconbox.
We just put the iconbox in the column like you did, but give the iconbox a transparent background and no border!
To have now a look-alike iconbox we can shift the whole iconbox over the top-border of the column.
The rest is a bit of Enfold styling options : background-color, border, and border-radius etc.

You can see here what is the trick at the bottom – you see the iconboxes that are with different height.
But if you make them transparent and shift it to the top they will look like iconboxes.

See here: https://webers-testseite.de/equal-height/
Solution is in Source-Code ;)

give to the columns or to a parent-container a custom-class f.e: equalboxes

/**** play a bit with the shift values ***/
.equalboxes .iconbox.iconbox_top  {
	position: relative;
	top: -100px;
	margin-bottom: -100px;
	padding-bottom: 60px;
	background-color: transparent !important;
}

/**** maybe for buttons to have them on the bottom ***/
.equalboxes .avia-button-wrap.bottom-button {
	position: absolute;
	bottom: 0;
	right: 10px;
}

/****** media-query depends on your breaking-point for responsive layout ************/
@media only screen and (max-width: 767px){
	.equalboxes {
	   margin-bottom: 80px !important;
	}
}

if you are using logo left – menu right – you can have a multiline menu!
https://kriesi.at/documentation/enfold/menu/#multiline-menu

But with a lot off sublevel menu it is best if you place the first-level menus without submenu on top

schick mir doch mal den Link bitte dann schau ich rein.
Wie es geht weiss ich. Nur der Selector weicht bei jedem Layerslider halt ab.

Der Layerslider macht je nachdem aus Textblöcken einzelne Zeilen!

Dann kommt da ein div noch extra hinzu – wie es oben Rikard schon erwähnte mit der Klasse: line
Du musst aber spezifisch bleiben, da die auch bei fetten überschriften etc. greift.
Also bleibt einem nur, dann die div.ls-wrapper:nth-of-type(x) oder child methode um es selektiv zu haben .

hier zB macht er das nicht mit den lines: https://layerslider.kreaturamedia.com/sliders/architecture-slider/

• This reply was modified 5 years, 6 months ago by Guenni007.

this is my advice : https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107

so you will have less offtime. If there are some troubles – you can switch back to the old version in seconds.

do the image containers have links?
do they all have links? – anyway

I thought it might be done in your way – but it is harder to reach than i can imagine. Maybe a Mod knows an easier way.
I only got a solution with 3 nested flex containers.

you can see all on this page: https://webers-testseite.de/elenapoliti/
css code and alb layout including.

Do not choose the columns to be equal height on Enfold ! – we will do that with flex settings.
In that color-section with your setting – do not place additional Elements in it – not even separators.
Inside the columns you can place other elements – the image has to be the last one.

Notice: I would only do these settings to be active for non-responsive case. Depends on your settings
Synchronize the breakpoint of the columns with that rules: Edit column – Row screen options – Fullwidth Break Point

• This reply was modified 5 years, 7 months ago by Guenni007.

.logo, .logo a {
    overflow: visible !important;
}

and – sorry Victoria – maybe this is a little more elegant:
– so get rid of :

.subtext {
    display: block;
    left: 120px;
    position: relative;
    top: -65px;
}

.header-scrolled .subtext h1 {
    font-size: 18px;
}

and instead – and maybe only for non-responsive case

@media only screen and (min-width: 768px) {
  .logo img {
    float:left
  }

  #top .logo,
  #top .logo a {
    overflow: visible !important;
  }

  #top .subtext {
    float:left;
    position:relative;
    padding-left: 18px;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  #top .subtext .logo-title h1 {
    margin-bottom: 0;
  }

  .header-scrolled .subtext h1 {
    font-size: 18px;
    transition: all 0.3s ease
  }
}

after that we will see how to style the small screens.

best would be to include the heading font-size with shrinking amount – but that will be done only with a child-theme avia-snippet-sticky-header.js file

This here is the title of your start posting – and the title of your topic: Gallery with four thumbnails above and one big image below

On your testpage https://webers-testseite.de/4on1-flexbox-model/, you have four thumbnails in a row. But on my page, I only want to have two thumbnails in a row.

So this was described correctly but inadequately.
Also this one: “Two galleries, one above with four thumbnails and one below with one big image” doesn’t exactly lead me to assume it could be 2 rows and 2 lines. Anyway –

That my approach is not only theoretically correct but also works practically can be seen on my test page.
If you like to have the behavior of 2 small images in two rows and then one big your can see on the media-query with the 50%.
just get rid of that media query on 989px and set the first rule to :

.flex4on1 .avia-image-container {
	flex: 0 1 calc(50% - 2px);
	margin: 0 0 4px;
}

Why : on two containers there should be a distance of 4px. Both containers are set to space-between – So outer edges are left resp. right-justified. You have then for both containers a width of : (100%-4px) so each Container has a width of : (50%-2px)

on 4 images besides ( and I apologize for any inaccuracy ) you have there you have three spaces all should have 4px ( 12px )
same play: (100%-12px) each image then : (25%-3px)

I just switched my test page now to that setting – and changed the code-block content too.

I hope you can recreate my situation on your testpage and find a way to correct the vertical white space.

No i can’t – because i do not have this issue

So if something doesn’t work on your installation, i would have now to look for the reason on this page;
since I can’t do that, you will have to wait for mods.

But i guess your 50% – 4px is the reason for

• This reply was modified 5 years, 7 months ago by Guenni007.

ne heute nicht mehr – der Büro Rechner ist aus.
Das hier läuft alles über mein Arbeitstier: den Mac. – Da rufe ich keine E-Mails ab.

PS: ja mach mal, kann ich ja im Web-Client einloggen!

• This reply was modified 5 years, 7 months ago by Guenni007.

But the initial open setting on behavior is set to “0” ?
And the link to that page does not go to with including toggle-id like : /boligforeninger/#toggle-id-1

And why two times opening a new post on similar thing: https://kriesi.at/support/topic/change-color-text-input_checkbox_label-form-with-background/

my answer is there

since the existing rule is also set to important – we must then do the same with even more selectivity
The Link inside had to be influenced too.

#top.page-id-519 .input_checkbox_label {
  color: #fff !important;
}

#top.page-id-519 .input_checkbox_label a {
  color: #f1c20c !important;
}

And you love me too? ;) – because i’m not part of that team.

i do not see your page – but you can use the filter in this case: avf_customize_heading_settings

This filter exists in a lot of ALB Elements to change the heading tag: Link

on time line there are two possibilites to influence the date and the title
And you can even add an additional Class to these tags:
Put this to your child-theme functions.php

function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array()){

// this is for the date 
  if( $context == 'avia_sc_timeline' && is_array( $extra_args ) && in_array( 'date', $extra_args ) )
  {
    $args['heading'] = 'h3';            
    $args['extra_class'] = 'custom-date-class';   
  }

// this is for the title 
  if( $context == 'avia_sc_timeline' && is_array( $extra_args ) && in_array( 'title', $extra_args ) )
  {
    $args['heading'] = 'h2';            
    $args['extra_class'] = 'custom-title-class';   
  } 
  
  return $args;
}
add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );

add this to the whole code:

.flex4on1::before,
.flex4on1::after {
    display: none !important;
}

i had to see your site ! – no images

are your images the same size! if they got different aspect ratio it will be nearly impossible to get that result.
You can see my testpage that it works on all screen width.
otherwise look for a mod

Next Question: these are only images ( with maybe a link to lightbox or other pages) ?
It must be a masonry effect? ( Masonry Gallery ALB Element ) ?

This is a different approach.
The Masonry Containers are a list of anchor elements.
Anchors are always block-level element.
https://webers-testseite.de/4on1-flexbox-model/