überprüfe das mal ob wirklich der Header sich in den Maßen ändert. Ich denke die Section verändert sich dadurch, und da sowohl Header als auch Section ähnliche Hintergrundfarben haben siehe es so aus als würde der header höher. Da Logo bleib jedenfalls in seiner Größe gleich.

Ausserdem hast du ja unterschiedliche min-height Einstellungen gesetzt- und das mit unterschiedlichen Hintergrundbildern.

What you are looking for is called a tooltip. You could create this manually yourself by placing a text after the texts that require explanation inside a f.e. span tag with a special custom class and then using this class to show/hide it when hovering.

However, if you use this frequently, this is probably a cumbersome method. There are probably some plugins that could do just that.
see for example that demo: https://tooltips.org/wordpress-tooltip-plugin/wordpress-tooltips-demo/

First On Theme Options you find at the bottom: “Select Your Editor” – choose the classic editor

Next if you like to see at start the advanced builder editor you can add this to your child-theme functions.php:

function trigger_alb_on_load(){
?>
<script>
(function($){
    $(window).on('load', function(){
      setTimeout(function() {
        $("#avia-builder-button").trigger('click');
      }, 300);
    });
})(jQuery);
</script>
<?php
}
add_action('admin_head-post-new.php', 'trigger_alb_on_load');

den “Jump” wirst du ja nur an Desktop Browsern sehen. Ein Mobiles Endgerät wird nur in der Lage sein beide Zustände zu sehen, wenn die Größe des Displays im Querformat mehr als diese 768px beträgt. Durch das Kippen ist aber ohnehin soviel optisch im Umbruch, dass man das Springen hier kaum wahrnehmen kann. Das Phänomen tritt ja nur auf, bei Desktop Browsern, deren Größe durch ziehen des Fensters verkleinert wird.

Ich finde das Verhalten des Hintergrundbildes im responsiven Fall der ersten color-section da viel schlimmer.

___________

You will only see the “jump” on desktop browsers. A mobile device will only be able to see both states if the size of the display in landscape format is more than 768px. Due to the tilting, however, there is so much visual change anyway that you can hardly notice the jumping here. The phenomenon only occurs with desktop browsers whose size is reduced by dragging the window.

I find the behavior of the background image in the responsive case of the first color section much worse.

Der dreht euer X im Logo auf Plus bei geöffnetem Burger Menü – kleine Spielerei

:lol:

.avia-svg-logo g:nth-of-type(5) {
  transform-origin: 155.25px 18.8px;
  transition: transform 0.3s ease;
}

.av-burger-overlay-active .avia-svg-logo g:nth-of-type(5) {
  transform: rotate(45deg);
  transform-origin: 155.25px 18.8px;
}

looking to your svg now ( a former topic got the link to your page)
the “Ideen” text is black because its class st8 is not set in the defs/style – every not referenced fill will be black.

i do not know how you use the path, circles etc in your illustrator.
first : there are other elements inside that svg ( your scetch for example is inside the svg – that is the reason for its big file-size)
next: why clip-path settings ? do you edit your svg in another program?

look at this svg code on my example page:
it has unique classes without any clip-path need. It has a size of 5kb due to only using vector elements.
https://webers-testseite.de/ausgesonnen/

btw: you can see here how you can determine other classes (graphic-styles) in illustrator.: https://kriesi.at/support/topic/transparent-logo/#post-1459268

The logo is an inline svg file – is your svg inside the color-section an inline svg too?
– Why asking this: if you got two inline svg files with the same classes inside ( and that often happens if you use illustrator – because if you do not set the grafic styles – illustrator uses in former times st as class – now it is : cls ).
now your logo is often the first svg on your DOM – if now the next svg has a different color setting for that standard class – it will determine the color for all those classes for the whole page – (cascading style sheet).

eg: if the class inside the logo there is : .st1{fill:#EB5F3D;}
and another st1 is on that page – this will determine the fill color.

so – be more specific in your selectors:
e.g.:

#top.page-id-123 .avia-svg-logo .st1 {
  fill: #FFFFFF;
}

ok – was genau ist mit “funktioniert nicht” gemeint?
– bei Scroll das flickern der Hintergrund Grafiken?

Ist es sinnvoll 3 columns nebeneinander in eine 1/2 Grid-Zelle zu pressen?
(PS man kann übrigens, die Cell-Breiten ändern : “Set Cell Size”)

PPS: ich denke hier an Board sollten wir untereinander Duzen. Im Englischen ist da ohnehin kein Unterschied.
– weiterhin ist die Seite – und das brauche ich Dir ja nicht sagen – extrem abmahngefährdet ( gstatic/recaptcha etc. läßt grüßen )

this will be hard to get – because each of the grid-rows are a unique container.
you can define the order inside this grid-row ( like mike shows above) – but not switch between different grid-rows.

i would do this with color-section and 15 1/5 columns ( this is not needed because width will be set in a different way ) – and it looks nicer in the backend.
We have total control over all columns by giving them unique names ( this is better to handle – then the css selectors )
( on my example page : feld1, feld2 etc ( that means field1, field2 etc. ) )

the position is set by the property: grid-template-areas
see example including code on: https://webers-testseite.de/griddy/

see what happens in between 550px and 767px – you can combine ( like in a table with colspan or rowspan) areas and fill with only one field.
see when the responsive view is on one Column only. the area 5 is above area 10 etc.

Offtopic
by the way – the template_redirect could be used to have not the ugly : //domain/?s=xyz on search results page
but //domain/search/xyz

function re_rewrite_rules() {
  global $wp_rewrite;
  $wp_rewrite->search_base = 'search';
  $wp_rewrite->flush_rules();
}
add_action('init', 're_rewrite_rules');

function change_search_url() {
    if ( is_search() && ! empty( $_GET['s'] ) ) {
        wp_redirect( home_url( '/search/' ) . urlencode( get_query_var( 's' ) ) );
        exit();
    }
}
add_action( 'template_redirect', 'change_search_url' );

i can find this css in your setting:

homepage:

.avia-slideshow li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  list-style-position: outside;
  position: absolute;
  visibility: hidden;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  clear: both;
  opacity: 0;
  overflow: hidden;
}

visibility: hidden; opacity :0

.av-masonry-entry {
  position: relative;
  display: block;
  width: 24.9%;
  float: left;
  clear: none;
  text-decoration: none;
  visibility: hidden;
  opacity: 0;
}

visibility: hidden; opacity: 0; ?

For: “Case Study: Amrop Executive”
Are you talking about the responsive view – when the grid cells are displayed one below the other?
If the image is only background-image – this is no content. So you had to give a height or min-height property to those cells.

Actually, I thought there was a min-height option for the individual grid cells (but only for the whole grid-row it does exist). Just put a separator/whitespace in such cells with the desired height.

________

on those three pages and the “Why Choose the Coral Starfish” – there should be banners?
can you name the images you set in – it is then easier to look for it in the DOM

you have various revisions of these pages – try going back if you have accidentally deleted them.

Do you use Safari Browser ?

see: https://kriesi.at/support/topic/enfold-back-end-not-working-in-safari-on-sequoia/#post-1468431

what was the solution? first snippet or css bug fix?