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 1 month 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):

can i see the page?

Otherwise, make it a competition! Anyone who wants to should send in a demo. The content is already known. Maybe a few hints on what new features should be emphasised.
PS: The news about 6.0.7 has already been sent out, but you can still download the old version from Envato.

if you really want to change only on mobile devices – there is a wp_is_mobile( )

f.e:

function av_change_mobile_logo($logo){
    if(wp_is_mobile()){
      $logo = "/wp-content/uploads/your-mobile-logo.png";
    }
    return $logo;
}
add_filter('avf_logo','av_change_mobile_logo');

on Advanced tab of the Element : under Performance – choose : “Do not use Responsive Images”
if you do not have that choice: put this to your child-theme functions.php:

add_theme_support('avia_show_alb_responsive_image_option');

then the webp will do their job. For some reason, the images from the srcset are superimposed.

so i can see your search input field. You like to center it now – that this box will have the same alignment than the other nav items?

so remove the display options first for that menu-item:

#menu-item-3327 {
  height: 90px;
  display: flex;
  align-items: center;
}

it is important to use the navigation as flex container:
( have a look if this is better)

#avia-menu {
  display: flex !important;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

#menu-item-3327 {
  margin-right: 10px;
}

.dgwt-wcas-search-input {
  height: 35px !important;
}

.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  height: 35px;
  background-color: #22689e !important;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier{
  overflow: visible
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier path {
  fill: #FFF !important;
  stroke: #FFF;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before {
  display: none;
}