Logo springt

Next:
ich sagte Dir ja bezüglich der Zentrierung des Logs, das du mit dem Media Query probieren musst bis wann das noch gut aussieht.

Du könntest also dieses css durch aus so verändern:

@media only screen and (min-width:449px) {
  .responsive #top .logo {
    display:inline-block;
    width:100%
  }
  .responsive .logo a {
    display:inline-block
  }
  .av-contains-svg {
    left:50%;
    transform:translateX(-50%)
  }
}

zusätzlich könntest du für alle Weiten folgendes setzen:

.responsive #top .logo img, 
.responsive #top .logo svg {
  width: 250px;
}

ü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.

ich bin generell kein Freund von der Methode des doppelten Contents.
Sei es drum – du hast ja für diese zweite Section ( wie oben angemerkt auch eine unterschiedliche min-height definiert
bei av_section_1 ist es 300px – bei av_section_2 ist es relativ auf : 34vh
ob das sinnvoll ist es auf die Screenhöhe zu setzen ist fraglich. – ich wäre geneigt hier sogar es abhängig von der Screenweite zu machen.

sieh mal hier : ein Hintergrundbild – eine Section : https://webers-testseite.de/ausgesonnen/
lediglich bei sehr kleinen Screens würde ich dann noch den Batch etwas mehr nach links rücken.

zunächst. Ich arbeite dort also nur mit einer Section und die hat auch nur ein Hintergrundbild. Dein Hintergrundbild hat eine aspect-ratio von : 423/1210
als ca. 35%.
Innerhalb den Optionen der Color-Section gibt es die Einstellung : min-height – dort nimm dann die “responsive section” und setze das auf 35%. Früher ohne diese Option habe ich das dann via css gemacht. Die % bedeuten hier nämlich das bezüglich der Screenweite die Höhe 35% beträgt .
das ist 35vw ( meint von 100 videoscreen width (vw) ist die Höhe 35 vw ). Das ist allerdings eine Höhe – keine Mindest Höhe – man muss also aufpassen, das der Content genug Platz hat und nicht dann übersteht.
Dadurch richtet sich nun die Section in Ihrer höhe nach dem Verhältnis der Hintergrundgrafik.
_______

Dem Batch gebe ich auch eine relative Größe, damit der im responsiven Fall nicht unproportional groß ist. – Das ist wie bei Dir auch ein img ALB Element.
Mit der Überblendung zu einem anderen Bild bei hover ( leider eben nicht auf mobile devices ). Das es bei mir ein inline svg ist liegt an einem code snippet das mir alle img[src=*.svg”] in inline svg ausgiebt. das ist aber egal – es geht auch mit dem svg im img tag.

_________

Das mit dem Reinrollen – geht ja bei Img Element : Advanced Tab : Animation : “Roll in”
Das Überblenden ist etwas drunter bei “Image Hover Effect”: Fade to another image.
Damit das Rund wirklich gut klappt, sollte das andere Bild ein 1:1 Seitenverhältnis haben.

aber hochladen der svg geht doch in der Media Library – oder?

svg’s benötigen absolute Größen Angaben! Manche svg codes haben Weiten und Höhen Angaben intern – Viele bevorzugen jedoch ausschließlich viewbox Angaben. Dann musst du im Quick css eine absolute Weite setzen. Bei den meisten Elementen bestimmt dann der umgebende Eltern-Container die Größe.

z.B über das Quick css:

#top img[src*=".svg"],
 #top #main svg {
  width: 900px;
}

muss man dann halt sehen.

das liegt daran, dass Du bei Dir 1/4 columns verwendest. Auf meiner Beispielseite habe ich eine 1/1 column. Das Image habe ich auf left gesetzt, und dem per css ein (relatives) margin-left verpasst, damit es in die richtige Position kommt. Ausserdem erhält es bei mir auch noch eine Größe die sich nach der Screen-Weite richtet – da es ja ein Bild mit Überblendung ist, und es bei mir einmal ein inline svg ist und einmal ein img tag muss ich für beide die gleichen Regeln setzen.

(ich vergab eine custom css dem IMG Alb Element: ideen-batch

.ideen-batch svg,
.ideen-batch .avia_image {
  width: 20vw;
  margin-left: 10vw;
} 

@media only screen and (max-width: 549px) {
  #av_section_1 {
    background-position: 75% 100%;
  }
  .ideen-batch svg,
  .ideen-batch .avia_image {
    margin-left: 3vw;
  }
}

ALB Element ist Advance Layout Builder Element – also das was du in dein Layout einsetzt. z.B. Image – vielen (wenn nicht sogar alle) diese ALB Elemente haben die Option eine benutzerdefinierte Klasse zu erhalten. Also im Edit Modus dann auf Advanced Tab dort Develper Settings (bitte dort in den Eingabefeldern die Bezeichnung ohne Punkt eingeben).

du hast es noch auf bild mittig!
und auf Grund der Setzung der allgemeinen svg weite, müssen wir hierfür dann selectiver werden:

#top .ideen-batch svg,
#top .ideen-batch .avia_image {
  width:20vw !important;
  margin-left:10vw
}

zunächst – ist das intentional, das der Kreis zunächst ohne die Inhalte gezeigt wird?

da oben habe ich ja auch schon eine Anpassung angedeutet. Da kann natürlich auch die width mit hinein.

Hast du eigentlich wirklich die container weite auf 1130px gestellt? ( in dem Fall wäre die margin-left hier nicht nötig).