i would layout four 1/4 columns inside a color section with a custom class f.e.: special-sixth-grid

and then place this to your quick css:
( fr is abreviation for fraction – means part – so if there are for 100% = 6fr : 1fr 2fr 1fr 2fr that is your setting of 1/6 2/6 1/6 2/6 )

#top .special-sixth-grid .entry-content-wrapper {
  display: grid;
  margin: 0;
  gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: 1fr 2fr 1fr 2fr; 
  align-self: stretch
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive #top .special-sixth-grid .entry-content-wrapper {
    gap: 20px;
    grid-template-columns: 1fr 2fr; 
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top .special-sixth-grid .entry-content-wrapper {
    gap: 20px;
    grid-template-columns: 1fr; 
  }
}

#top .special-sixth-grid .entry-content-wrapper:before,
#top .special-sixth-grid .entry-content-wrapper:after {
  display: none;
}

#top .special-sixth-grid .entry-content-wrapper .flex_column {
  width: unset !important;
  margin: 0 !important;
}

see an example page ( only the top part – i added to an existing example page ): https://webers-testseite.de/4on1-flexbox-model/

and by the way – Enfold has a no compression level on those recalculated images – that will cause some unnecessary big file-sizes f.e. it might happen that the big sizes 1500×630 and 1500×430 are bigger in file-size than the uploaded original!

screenshot from enfold default setting:

so after erasing some image-sizes – and before recalculating the preserved image-sizes – put this snippet to your child-theme functions.php (change the 55 to what you like to have):

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

see here a comparison of normal and italic font of montserrat ( just chaning it in developer tools to render the normal font as italic )

Yes – the small “a” is different !

some serif fonts do have more specific differences in comparison. On performance reasons – do not upload those italic font-styles.

can you test in your quick css:

@media only screen and (min-width: 480px) {
  .responsive #top #header .main_menu .social_bookmarks {
    z-index: 5;
    line-height: 90px;
    margin-left: -40px
  }
}

@media only screen and (max-width: 479px) {
  .responsive.av-burger-overlay-active #top #wrap_all #header .social_bookmarks, 
  .responsive.av-burger-overlay-active #top #wrap_all #main .av-logo-container .social_bookmarks {
    display:  block;
  }
  .responsive #top #header .main_menu .social_bookmarks {
    z-index: 5;
    line-height: 90px;
    margin-left: 20px;
  }
}

but i guess you had to think about a different position for those social bookmarks – maybe the header_meta is a good place for it. Because on screens smaller than 1400px your main menu overlaps your logo and the social bookmarks nav floats into a second line.

• This reply was modified 10 months ago by Guenni007.

you can use a default text block element – and insert that media file to it:

(click to enlarge the screenshot)

1 – position the cursor to a place where you like to insert your image ( btw. you can later drag&drop the image to a different place)
2 – click that button “Add Media” – the media library opens and you can choose the file.
3 – you can adjust the dimension on pulling one edge of the image ( without pressing any key on your keyboard – it will preserve aspect ratio)
4 – click on the inserted image to see the option to set a floating ( or determine it already in step 2 )
5 – you can set additional settings to that image on clicking the edit button ( pencil )
5.1. … on that new popup ( without screenshot ) you can do different things ( like a class to the image, or to the link if it is set, …)
a custom class (e.g. alignright-margins) to the image could be very nice – to determine the margins arround a floating image f.e.

img.alignright-margins {
  margin: 0 0 20px 30px;
}

do not forget to save your settings.

or as mentioned above the plugin: https://en-gb.wordpress.org/plugins/regenerate-thumbnails-advanced/

First: install the plugin. Start by deleting all calculated Image-sizes by:

Second: enter the snippet to your child-theme functions.php and

Third: go to that plugin again and recalculate the preserved image-sizes:

can your try in quick css:

@media screen and (min-width:1226px) {  
  #top #header .av-main-nav > li > a {
    line-height: unset !important;
    height: unset !important;
  }
  #top div.avia-menu {
    height: 100%;
  }
  #top #avia-menu {
    position: relative;
    top: calc(100% - 35px)
  }
}

i see that you have set on the page /our-clinic/about for the other cell a min-height – that will be possible if you want only the flip-background image to cover only ( including crop ) – you have to remove all paddings on that cell with the flip-box and set the same min-height / height option there !!!
my method above is only to have totaly responsive bg-image for flip

you can test if for the above page by:

.av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback,
.av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front {
  margin: 0 !important;
}

.av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 {
  min-height: 500px !important;
}

.av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .avia-icon-grid-container,
.av-layout-grid-container.av-li73q-e1db10c26939acc99331ee70921182c6 .article-icon-entry {
  min-height: 500px !important;
}

.responsive #top #wrap_all .flex_cell.av-5cyqiu-1b136132ec762676c6173331de16be40{
  padding: 0 !important;
}

i would give the grid-row a custom class or ID and set the css for that.

does your page have on html a lang attribute?
because your pages are password protected i can not inspect it.

for polylang try in child-theme functions.php:

function av_change_logo_link($link){
	$lang = pll_current_language('locale');
	switch ($lang) {
		case 'fr_FR':
		$link = "https://backlink_to_french_page";
		break;
		case 'de_DE':
		$link = "https://backlink_to_german_page";
		break;
	}
	return $link;
}
add_filter('avf_logo_link','av_change_logo_link');

adjust your languages with the examples given above
____________
or shorter if it is one default and one extra lang:

function av_change_logo_url($link){
    $lang = pll_current_language('locale');
    if ($lang == 'ro-RO') {
        $link = "https://your_needed_link";
    }
    return $link; 
}
add_filter('avf_logo_link','av_change_logo_url');

guess for Romanian it is ro_RO

i guess i took the plugin above because some of those tools do not remove the already existing thumbnails.
one plugin that is more clear in this is: https://en-gb.wordpress.org/plugins/regenerate-thumbnails-advanced/

it has a clean-up function “Delete unused Thumbnails”

if your language plugin set the correct lang attributes to html – you an use it as:
( this example is for german pages a new logo link)

function av_change_logo_link_on_different_languages($link){
    $currentlang = get_bloginfo('language');
    if($currentlang=="de_DE"){
        $link = 'https://lang_specific_link';
    }
    return $link; 
}
add_filter('avf_logo_link','av_change_logo_link_on_different_languages');

see: https://kriesi.at/support/topic/still-fighting-with-managing-default-image-sizes/#post-1418393

or: https://kriesi.at/support/topic/bilder-speicher/#post-1422743

Read the comments carefully in those snippets – some image-sizes are needed for backend to work.

i try now your setting of background-image on front- and normal flip under that demo

btw. this only works – if the content of the other cell does not need more space than the height-setting
then you have to break at 989px – and if that does not work too – you have to live with those spaces ;)
Because the cell with more content (space for that content ) determines the height of the grid-row.

Das Menu, welches dir oben bei Enfold angezeigt werden soll muss in den Menü Optionen angewählt werden: Punkt 4 im Bild.

(click to enlarge the image)

Wenn du also dann via (1) ein neues Menü erstellt hast (Benennung bleibt dir überlassen) kannst du Menüpunkte (2) dem Menü hinzufügen. Solltest Du also “Startseite” ( im Bild home da ich die Seite auf englisch führe) hinzugefügt haben, dann kannst du bei (3) den Pfeil klicken. es erscheinen die Optionen zu dem Menüpunkt als Dropdown. Hier kannst du bei “Naviagtion Label” etwas anderes eintragen.

PS : solltest du nicht so viel angezeigt bekommen wie auf meinem Bild dann sind oben rechts in dem Dropdown nicht alle Optionen ausgewählt.