may i see your page too? As participant i can not see private content area – so if it is possible to post here …

see here for example an enfold page with implementing Intersection Observer ( scroll to “Dienstleistungen” ) –
big advantage is that each time the objects comes into viewport – animation starts again.

by the way all h2 headings are animated that way.

https://webers-web.info/

where did you “inject” your script? – via child-theme functions.php ?

for the full-width mega-div you can try now:

#top #header .avia_mega_div {
  position: fixed;
  width: 96vw;
  left: 1.5vw !important;    /*=== because of the scrollbar  not 2vw ===*/
  top: 120px;
}

or maybe with background styling:

#top #header .avia_mega_div {
  position: fixed;
  width: 96vw;
  left: 1.5vw !important;
  top: 120px;
  background-color: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 0 0 15px 15px !important;
  border: 1px solid #FFF;
}

#top #header .avia_mega_div ul {
  background-color: transparent;
}

next release there will be for shrinking headers a variable value ( –enfold-header-height) which represents what it said – the dynamically header-height.
for then we can use top: var(--enfold-header-height);

for the rest i will look again to your example page.

But how to declare a favorite? as a normal visitor i expect a button to set a favorite. ( by the way : as long i could not declare a favorite – i do not see that button ) – so i guess i had to be registered first.

eventuell gehst Du bei diesem speziellen Iconbox Layout dazu über, das als Grid Layout zu gestallten; denn geh mal die responsiven Weiten des Elementes durch. Irgendwann wird es zu schmal.

Was ich meine ( jetzt mal nur für diesen Fall):

#top.postid-5503 #av-layout-grid-2  .avia-icongrid {
  margin: 0;
  padding: 0;
  gap: 0px;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-auto-flow:  row;
}

#top.postid-5503 #av-layout-grid-2  .avia-icongrid .av-icon-cell-item .avia-icongrid-flipback {
    padding: 0;
}

#top.postid-5503 #av-layout-grid-2  .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front .avia-icongrid-inner, 
#top.postid-5503 #av-layout-grid-2  .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback .avia-icongrid-inner {
    padding: 10px 3em;
}

Wenn das Layout mit seinem Inhalt dann steht , könnte man noch einstellen das die letzte Zeile sich unten zentriert.

nicht sichern sondern die default werte ändern. (verkleinern)

kannst du mal das Merging für css abstellen. Dann kann ich das leichter inspizieren.

PS: aber alle Höhen richten sich einheitlich nach dem größten Content. Und mit den o.a. paddings – ist das nunmal bei dem article mit dem Bild ca. 400px
Wenn alle Iconboxes bilder haben wird es sich nach dem dann größten Content richten.

• This reply was modified 8 months, 3 weeks ago by Guenni007.

the easiest way would be: if devs could create a conditional input field as soon as you have selected lightbox as the destination, in which you can enter the mfp type as a link class – because:
By default, Magnific Popup has four types of content: image, iframe, inline, and ajax ( classes: mfp-image, mfp-iframe, mfp-inline, mfp-ajas) . There is no any “auto-detection” of type based on URL, so you should define it manually.
But that had to be tested if that will be enough to rule the grouping between mixed content.

Thanks @ismael : it’s just for info – and my snippet stock – Of course I know that all the Media Query Css rules remain unaffected.

benefit of svg Logo
( that is created like that (good Grouping inside and well documented with ID’s and classes ))

see here what happens to your Logo on scrolling or making the screenwidth smaller: https://webers-testseite.de/aussie/

Edit: ok – i now remove it from that example page – seems that there is no interest of having a sharp logo ;)

this is a not so complex Logo – why don’t you make a svg from it. The advantage is – that it is a vector based Graphic. So it is always sharp.
The font is, i guess Trade Gothic – so only the branding is to create:

Download it from here – and forget about sub logo text etc.

https://webers-testseite.de/wp-content/uploads/IVEY-logo.svg

You can contact me again in five years. ;)

PS: if you like to have different colors – then open the svg with a good text editor (notepad ++ or sublime text) – you will see that the groups are ID’s and different colours are classes: – so it is easy to recolorise it:

first – what kind of box ( enfold ) a column or a icon-box etc. here is an example with columns:
i gave a custom class to those columns : hoverstyle.
https://webers-testseite.de/aussie/

Wegen etwas höherer Browser Kompatibilität (so war es jedenfalls mal bei Safari und clamp) nutze ich für fluide font-size Definitionen die min/max Methode.
Siehe Link in Enfold Typography Sektion: https://spencermortensen.com/articles/typographic-scale/ wählte ich die musikalische Skala – und zwar einmal mit Faktor 2 und dann 3 ergeben sich folgende font-size Größen:
40-60, 36-50, 32-42, 28-34, 25-29, 22-24
was zu folgenden fluid Werten führt (ausgehend von einem viewport von 320px bis 1500px (Fluid-Font Calculator)
____
Due to slightly higher browser compatibility, I use the min/max method for fluid font-size definitions.
See link in Enfold Typography section: https://spencermortensen.com/articles/typographic-scale/ I chose the musical scale – once with factor 2 and then 3 the following font-size sizes result:
40-60, 36-50, 32-42, 28-34, 25-29, 22-24
which leads to the following fluid values (based on a viewport of 320px to 1500px (Fluid-Font Calculator)

da Enfold selbst mit CSS Variablen arbeitet:
as Enfold itself works with CSS variables:

:root {
  --enfold-font-size-theme-content: 13px;
  --enfold-font-size-theme-h1: 34px;
  --enfold-font-size-theme-h2: 28px;
  --enfold-font-size-theme-h3: 20px;
  --enfold-font-size-theme-h4: 18px;
  --enfold-font-size-theme-h5: 16px;
  --enfold-font-size-theme-h6: 14px;
}

könnte man die mittels Filter überschreiben:
you could overwrite them using a filter:

function my_avf_dynamic_css_after_vars( $output = '' ){
  $output .= "\n";
  $output .= ":root {\n";
  $output .=    "--enfold-font-size-theme-h1: min(max(40px, calc(2.5rem + (60 - 40) * ((100vw - 320px) / (1500 - 320)))), 60px);\n";
  $output .=    "--enfold-font-size-theme-h2: min(max(36px, calc(2.25rem + (50 - 36) * ((100vw - 320px) / (1500 - 320)))), 50px);\n";
  $output .=    "--enfold-font-size-theme-h3: min(max(32px, calc(2rem + (42 - 32) * ((100vw - 320px) / (1500 - 320)))), 42px);\n";
  $output .=    "--enfold-font-size-theme-h4: min(max(28px, calc(1.75rem + (34 - 28) * ((100vw - 320px) / (1500 - 320)))), 34px);\n";
  $output .=    "--enfold-font-size-theme-h5: min(max(25px, calc(1.5625rem + (29 - 25) * ((100vw - 320px) / (1500 - 320)))), 29px);\n";
  $output .=    "--enfold-font-size-theme-h6: min(max(22px, calc(1.375rem + (24 - 22) * ((100vw - 320px) / (1500 - 320)))), 24px);\n";
  $output .=    "--enfold-font-size-theme-content: min(max(16px, calc(1rem + (20 - 16) * ((100vw - 320px) / (1500 - 320)))), 20px);\n";  // p-tags  
  $output .= "}\n";

  return $output;
}
add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );

ich behielt mal die long-hand Version der min-max schreibweise – so wird deutlich wie die font-sizes berechnet werden.
I kept the long-hand version of the min-max notation – this makes it clear how the font sizes are calculated.

um es dann global durchzusetzen dies in die quick css:
to then globally enforce this here in the quick css:

body {font-size: var(--enfold-font-size-theme-content);}
#top h1 {font-size: var(--enfold-font-size-theme-h1);  }
#top h2 {font-size: var(--enfold-font-size-theme-h2); }
#top h3 {font-size: var(--enfold-font-size-theme-h3);  }
#top h4 {font-size: var(--enfold-font-size-theme-h4); }
#top h5 {font-size: var(--enfold-font-size-theme-h5);  }
#top h6 {font-size: var(--enfold-font-size-theme-h6);  }

btw: on Layout Builder – Typography Input Fields – you can activate that switch to have:
“Activate to replace predefined selectboxes with font sizes with text fields to use custom units. Only recommended for experienced users who know, what they are doing. This is in active beta (since 5.0.1).”
– you then can insert those fluid values to that input field. e.g. for extremly big h1 headings (80-120px) etc.

I would create an external format in my image processing program and then place the images there so that they have the height and width corresponds to the true proportions. Here, unfortunately, we come to the probable fact that such a can will look lost next to the barrel.

see here : i put all images in the same outer image dimensions ( 400 x 600 )
and then inserted the individual images in the image program according to their size. As a result, the png’s all have the same size, but the contents are proportional to each other.

download them here: https://webers-testseite.de/Kelly.zip

see – with code on the example page: https://webers-testseite.de/lunar-kitten/

if the place is too narrow the grids will autoflow – if you like to flow only to a 2/2 grid then we had to set a media query.
i set the image background to a color – so you can see that the images got the same outer dimensions.

• This reply was modified 8 months, 4 weeks ago by Guenni007.

or try instead :

.avia_textblock.bottomlined  {
  display: table;
}

  .avia_textblock.bottomlined > div {
    min-width: 80px;
    display: table-cell;
    float: none;
    border: none;
    padding-right: 10px !important;
  }

#top #footer {
  padding: 5px 0 ;
}

#top #footer .widget {
  margin: 10px 0 ;
}

#top #socket .container {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

The labeling there for the Enfold header options is misleading. Enfold sets the header to position : fixed when this option is selected.

position : sticky and position: fixed are not equivalent

i can see on your page that this is set on enfold child css – the default setting is by enfold in layout.css:
so that was my question

Also, I added the CSS you wrote under the Enfold Child Theme Options—General Styling—Quick CSS section, but it is still not working. Your suggestions may have confused me, so if you could please verify, that would be great. Thanks!

Thats why i told you to remove that setting from quick css
and it is placed twice – remove that (both):