your image has an aspect ratio of 5/4 = 1.25
the column on the left is 3 units wide – and the column on the right 2 units – so the height must be 2*1.25 = 2.5
above your 1310px ( keep the padding left/right of 50px in mind ) etc. …

see with css on : https://webers-testseite.de/gatehealing/

you see that below approx. 1000px, the height of the text determines the overall height – and the background-image on the right is cropped then.

Many of the suggested changes to the theme here on the board – are a lot easier to realize if you set up a child theme. That’s why I strongly recommend doing this.
However, there are probably also good plugins that can insert code snippets like the one above without a child theme.

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 1 year, 5 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.