Helix3: Hintergrund Einleitungsbild/Kategorieblog

Benschi · 27. Oktober 2020

Hallo zusammen,

ich habe ein Problem mit der Darstellung des Hintergrundes bei einem Kategorieblog wenn das Einleitungsbild höher ist als der Einleitungstext.

Der Hintergrund des Artikels hört quasi auf und das Einleitungsbild steht "hervor", schwer zu erklären, aber denke auf dem Bild sieht man sofort was gemeint ist.

Link zur Seite

Das gleiche Problem habe ich auch bei der Mobilen Ansicht der Premium Sponsoren ganz unten auf der Seite.

Bin jetzt kein großer Held was die CSS Programmierung angeht, aber lerne gerne dazu

Wäre cool wenn ihr mir helfen könnt und vielen Dank vorab.

Gruß Benschi

Indigo66 · 27. Oktober 2020

Dein Angabe in der custom.css Zeile 39, musst Du mit einem overflow: hidden erweitern.

CSS

article.item {
    margin-bottom: 10px;
    background-color: white;
    padding: 10px;
    overflow: hidden;
}

Dein 2. Problem muss ich mir später anschauen. Aber vielleicht hat jemand anderes auch schnell eine Lösung parat.

Benschi · 27. Oktober 2020

Hallo Indigo,

super, vielen Dank das war ja einfach

Punkt 2 konnte ich selber schon lösen in dem ich es zwei Zeilig gemacht habe.

Hätte da aber noch einen 3. Punkt. Ist es möglich in der Mobilen Ansicht den blauen Menü Balken in der höhe zu verkleinern?

Benschi · 30. Oktober 2020

Keiner eine Idee?

Indigo66 · 30. Oktober 2020

Du musst für den passenden Brakpoint (max-width: 990px) die CSS für das Menü/Header anpassen. Dein Problem ist ja eher, dass das Menü mobil fix oben stehen bleibt. Ist meines erachtens mobil nicht immmer vorteilhaft, außer der Hintergrund wird transparent.

Benschi · 30. Oktober 2020

danke für die Antwort, aber ich glaube das meine ich nicht. Das der blaue Balken in der Mobilen Ansicht oben angeheftet ist, ist ok. Ich möchte nur die höhe des Balkens kleiner haben. Hab es versucht auf dem Screenshot mal zu zeichnen.

Benschi · 30. Oktober 2020

Hab es gefunden, trotzdem Danke.

line-height im offcanvas-toggler war der Schlüssel.

Code

#offcanvas-toggler {
  line-height: 25px;
}

Elwood · 30. Oktober 2020

Wenn es so funktioniert ist das super!

Damit diese Änderung bei dem nächsten Template-Update nicht überschrieben wird,

solltest du es in die custom.css schreiben.

M.E. findest du das in den Template-Optionen:

Benschi · 30. Oktober 2020

ja das ist klar, Mache alle Änderungen in der custom.css. Trotzdem Danke für den Tipp.