Beiträge von Sailor56

Teste mal ...

p.price {
  text-align: center;
}

im 'zusätzlichen CSS'.

Weiß nicht, wie das mit Gutenberg ist... nutze ich nicht... aber von der Logik her muss ein Bild innerhalb eines Textblocks wohl ein 'inline Bild' sein.

Ja... sieht nicht 'hübsch' aus. Irgendwie ist da im CSS was schief gelaufen - als wären dort willkürlich padding und margin Werte eingesetzt und man hätte vergessen die dadurch überflüssigen Werte zu löschen.
Aber als Sofortmaßnahme, um das Erscheinungsbild der Seite wieder etwas aufzuhübschen, könnte folgender CSS Code im 'zusätzlichen CSS' helfen:

#nav .inner {
  display: flex;
  align-self: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
#brand img {
  margin-left: 0px;
}
#navleft {
  position: relative;
  padding-bottom: 2em;
  text-align: center;
  flex: 1;
}
@media screen and (max-width: 1320px) {
  #navleft {
    flex: auto;
    padding-top: 0px;
  }
  ul#menu {
    padding-top: 0px;
  }
}

Sicher noch nicht die finale Lösung - aber auf die Schnelle geht's nicht besser.
Die Telefonnummer muss irgendwo händisch eingetragen worden sein... wenn du die Stelle nicht findest musst du vielleicht mit einem Tool die Nummer in der Datenbank direkt ändern!

Ohne Link zur Seite schwierig...
Aber im Prinzip sollte das relativ einfach gehen.
Bild innerhalb des Textblocks platzieren und mit 'float: left;' formatieren - 'float: right;' geht natürlich auch.

Das könnte an einem ::before im CSS liegen und ließe sich mit:

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link::before {
  margin-right: 0px;
}

im zusätzlichen CSS abstellen.

zu 1.
Ja... der CSS Code kommt ins zusätzliche CSS (im Customizer). Änderungen immer dort machen, damit sie nicht bei einem Update überschrieben werden
Und beim HTML Code hast du die Wahl. So wie du es jetzt gemacht hast auf jede Seite. auf der das Logo angezeigt werden soll einfügen.
Oder du nimmst dir einen Seitenteil, der eh auf jeder Seite vorhanden ist (header.php oder footer.php) und fügst den HTML Code dann dort einmalig ein. Dazu müsstest/solltest du aber zuvor ein Child-Theme anlegen und die Änderungen dann in der entsprechenden Datei im Child-Theme durchführen. Die Dateien im Original-Theme werden bei einem Update überschrieben - im Child-Theme bleiben die Änderungen erhalten.
Den weißen Rahmen bekommst du weg mit :

.entry-content a img {
    -webkit-box-shadow: none;
    box-shadow: none;
}

Sollte dann ein Strich unterhalb des Logos zu sehen sein, dann bekommst du den weg mit:

.entry-content #logo a,
.entry-content #logo a:hover {
   -webkit-box-shadow: none;
    box-shadow: none;
}

und um das Logo mehr in den Vordergrund zu rücken, müsstest du zu dem #logo noch folgendes hinzufügen:

z-index: 1000;

Ja... selber 'basteln' mit CSS ist wohl der beste Weg, bevor du dir mit irgendwelchen zusätzlichen Plugins deine Seite vollmüllst!
Auf deiner Beispielseite ist das so gemacht worden:

<div id="logo" class="hide-mobile">
   <a href="/">
      <img src="images/logo_gruenwerk.svg" alt="Grünwerk">
   </a>
</div>

und das zugehörige CSS sieht so aus:

#logo {
    position: fixed;
    width: 48px;
    height: 200px;
    right: -1px;
    top: 50%;
    margin-top: -100px;
}


@media screen and (max-width: 800px) {
   .hide-mobile {
       display: none;
   }
}

Ich denke, das kannst du sehr leicht in deine eigene Seite (mit den für dich passenden Werten) einbauen.

Zitat von ASenna

Wenn ja, wie wirkt sich das dann auf die Ladezeiten der Seite aus?

Wenn du dir um Ladezeiten Sorgen machst, dann solltest du zunächst mal prüfen (mit dem Webentwickler Tool 'Konsole' - hat jeder Browser), was beim Laden deiner Seite alles passiert?
Wenn wir von der selben Seite reden, dann werden da durch nicht vorhandenen Dateien (404 Error) mindestens 10 Sekunden Ladezeit verschwendet.

Es handelt sich um ein (bzw. zwei) Hintergrundbilder, die je nach 'hover' oder nicht 'hover' aus- und eingeblendet werden.
Könnte man ausblenden (die Bilder), aber damit wird auch die Hintergrundfarbe (rot bzw. weiß) ausgeblendet... nur die Zweitbeste Idee.
Versuch doch zunächst mal mit...

ul.dropdown li a {
  padding-left: 40px;
}

im zusätzlichen CSS diesen Überlappungseffekt - Schrift über den 4 Punkten - abzuschalten.
Vielleicht ist das ja schon eine Verbesserung.

Ohne Link zur betroffenen Seite kaum zu beantworten - könnte ein ::before sein.

Ausgehend von deinem Bild... mehrere farbige 'Blöcke' oben im Header... dann könnte die so ein Konstrukt an der passenden Stelle (als erstes im <header class="fusion-header-wrapper"> helfen:

<div class="color_top">
    <div class="color1"></div>
    <div class="color2"></div>
    <div class="color3"></div>
    <div class="color4"></div>
    <div class="color5"></div>
  </div>

Dazu im 'zusätzlichen CSS'

.color_top {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
.color_top div {
  flex: 1;
  height: 40px;
}
.color1 {
  background-color: #f00;
}
.color2 {
  background-color: #0f0;
}
.color3 {
  background-color: #00f;
}
.color4 {
  background-color: #f0f;
}
.color5 {
  background-color: #ff0;
}

Damit solltest du beliebig viele Farbblöcke in beliebigen Farben einfügen können.

Wenn dein Problem nicht generell der 'Stolz präsentiert... sondern lediglich die Überlappung auf der von dir genannten Unterseite, dann kannst du auch folgendes testen

.entry-content table.alignleft {
  height: auto !important;
}

Die Meta-Daten im Footer sollten dann unterhalb der Tabelle erscheinen - und der Strich sollte auch weg bzw. unter der Tabelle sein.

Ja... wird auch bei mir angezeigt! Aber ist wohl trotzdem (meine Meinung nach) so nicht ganz ideal.
Die Anzeige springt beim Verkleinern der Anzeige und mal wird das Headerbild abgeschnitten oder es entsteht unterhalb ein optisch 'unschöner' Leerraum. Dieser Effekt wird wahrscheinlich durch die im CSS (inline) eingefügten MediaQueries ausgelöst.
Mit folgenden Änderungen im CSS könnte man die Funktion und das Erscheinungsbild (responsiv) etwas optimieren.
1. Deaktiviere (auskommentieren) folgende Zeilen in deinem Inline-CSS

.site-header {
        background: url(https://www.kinderstube-kunterbunt.de/wp-content/uploads/2018/11/header-kinderstube-kunterbunt-1600x230.png) no-repeat scroll top;
        background-size: 100% auto;
    }


/*    @media (max-width: 767px) {
        .site-header {
            background-size: 768px auto;
        }
    }
    @media (max-width: 359px) {
        .site-header {
            background-size: 360px auto;
        }
    }
        .site-title,
    .site-description {
        position: absolute;
        clip: rect(1px 1px 1px 1px); /* IE7 */
        clip: rect(1px, 1px, 1px, 1px);
    }
        */

Also alles weg, was zwischen den /*.... */ steht! Und in der ersten Anweisung den Wert für 'background-size: 100% auto;' einstellen.

2. Deaktiviere (auskommentieren) folgende Zeilen in deinem Inline-CSS

/*
@media (max-width: 360px)
{
.site-header .home-link {
min-height: 60px;
}
}


@media (min-width: 360px) and (max-width: 767px)
{
.site-header .home-link {
min-height: 100px;
position: relative;
}
}


.site-header {
    background-color: #01b201;
background-size: 115%;
min-height: 100px;
}        */

also wieder alles zwischen den /*... */ unwirksam machen.

3. Füge folgenden Code in das zusätzliche CSS ein. (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

#masthead h1.site-title,
#masthead h2.site-description {
  display: none;
}
.site-header .home-link {
  height: calc( 100vw / 6.99 );
  min-height: calc( 100vw / 6.99 );
}

Die Idee hinter dieser Änderung:
Hintergrundbilder belegen keinen Platz - eingefügt in zB in ein <div> führen sie nicht dazu, dass sich dieses div in der Größe anpasst... es ist ja kein Inhalt im div, sondern nur ein Hintergrund In dem betroffenen <header id="masthead" class="site-header" role="banner"> befindet sich jedoch 'Inhalt' den man nutzen kann, um genau den Platz zu schaffen, den das Bild braucht - das Element .site-header .home-link.
Das Bild hat die Dimensionen 1600px * 230px - ist also ~ 6.99 mal breiter als hoch. Diesen Wert kann man mit 'calc' nutzen, um responsiv die benötigte Höhe zu berechnen.

Einfach versuchen, ob das klappt...wenn nicht, einfach die Änderungen wieder rückgängig machen.

Das CSS im Child-Theme sind ebenso updatesicher, wie das zusätzliche CSS im Customizer.
Überschrieben - bei einem Theme Update - wird das style.css der original Themes - deswegen niemals Änderungen dort durchführen, die werden nämlich sonst wieder auf 'Null' gesetzt.

Dann könnte dir das helfen:

#header-text-nav-container {
  background-color: #ddd;
}

Aber bitte - keine Änderungen in der style.css machen! Solche Änderungen gehören in das 'zusätzliche CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS).

Das sollte mit ein paar Zeilen CSS einzurichten sein: In etwa so...

.main-navigation li ul.children {
    display: none;
}
.main-navigation li:hover ul.children {
    display: block;
}

Die letzten Änderungen hast du aber im 'zusätzlichen CSS' gemacht - oder?
Das übelste was dir passieren kann, ist dass nach einem Theme-Update die Ursprungsdateien upgedatet werden und somit der Originalzustand wieder hergestellt wird. Das zusätzliche CSS bleibt aber erhalten, dann weißt du, wo du schrauben musst, wenn da mal was passiert.

Also in deinen Stylesheets herrscht eindeutig Chaos - so etwas habe ich sonst noch nirgends gesehen. Ein Gewimmel von Font-Size Angaben, die sich gegenseitig überschreiben. Ich fürchte, das wird dir noch ein paar Probleme bereiten. Was hast du da nur angestellt? Oder war das irgendein PlugIn?
Aber für den Einzelfall 'p' unter Erfahrungsbericht könntest du das so richten:

.archive-meta > p:nth-child(2) {
  font-size: 1.2em;
}

Bitte ins 'zusätzliche CSS' und ggf. mit !important; verstärken.
Und dann natürlich den Rest der Seite auf unerwünschte Nebeneffekte prüfen.

Das könnte man, wenn es in den Theme-Einstellungen keine Option dafür gibt, mit einer Zeile im 'zusätzlichen CSS' ausblenden.

.post-thumbnail.full-width-image {
  display: none;
}

Nach der Änderung aber bitte prüfen, ob es dadurch an anderen Stellen der Seite zu unerwünschten Nebeneffekten kommt.

Mit diesen beiden Formatierungen solltest du dein Formular auf jede beliebige Breite einstellen können:

.x-container.max {
  max-width: 800px;
}
.x-container.width {
  width: 95%;
}