Beiträge von Sailor56

    Alternativ, wenn du diese farbigen Felder gar nicht haben willst und lieber das Bild 'breitenfüllend' haben möchtest, dann kannst du auch
    .header-image img {
    width: 100%;
    }
    ins zusätzliche CSS eintragen. Hat allerdings den Nachteil, dass wenn die physikalische Bildbreite kleiner als die tatsächliche Displaybreite ist, sich ggf Unschärfen/ Pixeligkeit im Bild ergeben können.

    Das Element, in dem das Bild eingebettet ist und das jetzt als 'farbige Felder' sichtbar wird, wenn das Bild kleiner wird als die Seite breit ist heißt:

    <div class="header-image">

    Für diese Element ist eine Hintergrundfarbe (background-color: #dddddd;) festgelegt. Dieser Farbcode kann im 'zusätzlichen CSS' (Dashboard -> Design -> Custumizer -> zusätzliches CSS) nach Bedarf geändert werden.
    zB
    .header-image {
    background-color: (deine Farbe);
    }

    Die Größe (Höhe / Breite) wird zum Einen durch die CSS Angaben oder zum Anderen durch den Inhalt bestimmt.
    Solange du keinen Inhalt hast, wirkt deine height-Angabe... Ende... da kannst du nichts machen.
    Du könntest versuchen das Logo Bild nicht als Hintergrund, sonder als Inhalt in den Container einzufügen und dafür die CSS height-Angabe weglassen.

    Diese Code steht bei deiner Seite schon im zusätzlichen CSS (Inline: Zeile -145)

    Deinen neuen Code zum Ausblenden des Rahmens steht aber schon in Zeile 2!

    Dadurch wird die Änderung wieder vom Original überschrieben. Es gilt immer die letzte Anweisung.

    Also entweder den (Original-)Code ab Zeile 145 direkt ändern .... oder deinen neuen Code hinter dem alten einfügen.

    Eine für alles Seiten gültige Formatierung könnte diese sein:

    .entry-content a {
    color: #000000;
    }
    .entry-content a:focus, .entry-content a:hover {
    color: #770000;
    }

    Bin mir aber nicht sicher, ob man damit nicht auch 'unerwünscht' an anderen Stellen andere Hyperlinks anspricht, die nicht so formatiert werden sollen. Das müsstest du dann testen.

    Auch das festlegen von unterschiedlichen Farben für die einzelnen Seiten sollte möglich sein, indem du die im Body-Tag vorgegebene 'page-id-xxx' zu den jeweiligen Selektoren hinzufügst!
    Beispiel für die 'Fahrradtouren' wäre:

    .page-id-29 .entry-content a {
    color: #000000;
    }
    .page-id-29 .entry-content a:focus, .page-id-29 .entry-content a:hover {
    color: #770000;
    }

    Aber auch hier, bitte ausprobieren und prüfen, dass keine unerwünschten Nebeneffekte auftreten.

    Ja, man kann die Breite der Container ändern - auch mit CSS und der Anweisung 'width: xxx;'
    Den Selektor... also die 'Schlüsselwörter' für die fraglichen Elemente, findest du am besten, wenn du einfach mit rechts auf den fraglichen Bereich klickst und im Kontextmenü dann 'Element untersuchen' auswählst. Es sollte sich dann der 'Inspektor' (haben eigentlich alle gängigen Browser) öffnen und du kannst alle benötigten Informationen herausfinden.

    Da auf der Seite (mindestens) 3 Elemente mit einem 'background: #xxxxxx;' formatiert sind, müssen die wohl auch alle separat mit der gewünschten Farbe formatiert werden.
    Im zusätzlichen CSS könnte das helfen:
    body {
    background: #xxxxxx;
    }
    .mh-header {
    background: #xxxxxx;
    }
    .mh-wrapper {
    background: #xxxxxx;
    }

    für #xxxxxx den/die gewünschten Farbcode einsetzen.

    Eintag in das 'zusätzliche CSS' - unter Dashboard -> Design -> Customizer -> zusätzliches CSS.

    .textwidget a {
    color: #000000;
    }
    .textwidget a:focus, .textwidget a:hover {
    color: #770000;
    }

    Das sollte Funktionieren. Die Farbwerte können natürlich beliebig gewählt werden.

    #panel-308-0-1-0 > .panel-widget-style {
    background-color: transparent; /*für den Hintergrund */
    color: #000; /*für die Schriftfarbe*/
    }

    In das 'zusätzliche CSS' (Dashboard -> Design -> Customizer -> zusätzliches CSS) eintragen.
    Sollte das nicht wirken, mit ...

    #panel-308-0-1-0 > .panel-widget-style {
    background-color: transparent !important; /*für den Hintergrund */
    color: #000 !important; /*für die Schriftfarbe*/
    }
    versuchen

    'Ränder' lässt darauf schließen, dass du in deinem CSS 'padding' oder 'margin' Werte vorgibst, die zu dieser Verengung führen.
    Benutze mal den 'Inspektor' deines Browsers (normalerweise startet der mit 'F12') und untersuche die Elemente deiner Seite, ob da irgendwas mit margin und/oder padding zu finden ist.

    Dann sag uns doch bitte, was unterhalb von 400px nicht mehr 'perfekt' dargestellt wird.
    Aber der erste Teil dessen, was du anzupassen hast, müsste damit klar sein - du brauchst eine Media Query, die dir unterhalb von 400px deine Formate anpasst... also..
    Media only screen and (max-width: 400px) {

    [COLOR=#ff0000]/* und hier gehören alle die Dinge rein, die nicht 'perfekt' sind!
    zB
    body {
    font-size: 0.9em;
    }
    ... */[/COLOR]

    }
    Aber da du immer noch nicht gesagt/gezeigt hast, was dein Problem ist und was an die Bildschirmgröße <400px angepasst werden soll, kann dir auch keiner weiter helfen!

    Leider hast du den Hinweis von SEpp55 offensichtlich noch nicht zur Kenntnis genommen... wie soll man dir helfen, wenn du nur seltsame Abschnitte aus deinem CSS postest, ohne uns wirkliche Hinweise zu geben, wo wir uns die Sache und damit das Problem mal anschauen können.
    Aber anscheinend hast du auch nicht wirklich verstanden, was du machst... mit 'max-width:500px;' wirst du auf jeden nichts werden, damit begrenzt du nur zusätzlich die Möglichkeiten deiner Seite sich größer als 500px auszudehnen... hmmm... du hast da ja eh nur 480px in Querrichtung.
    Aber was ist mit dem Margin von 2em, dass du offensichtlich in deinem CSS für html, body und #page hast? Mach das mal mit der Media Query für kleine Bildschirme kleiner (oder 0) und lass die max-width so wie sie ist°

    Ja, das ist richtig - die Formatierung wirkt dann auf alle Elemente die mit dem Selektor '.et_divi_builder #et_builder_outer_content .et_pb_row' angesprochen werden.
    Einfach ausprobieren und sollte es dann zu ungewollten Nebeneffekten kommen, muss der Selektor verfeinert werden, so dass er nur auf der Startseite wirksam ist.