Beiträge von GraecoDesigns

  • Context-Boxen bei Mobile-Ansicht entfernen

    Hey!

    Das geht am einfachsten mit CSS Media Queries. Du kannst die Boxen in der mobilen Ansicht per display: none; ausblenden, ohne dass sie am Desktop verschwinden. Zum Beispiel so:

    Code
    @media (max-width: 768px) {
  .deine-box-klasse {
    display: none;
  }
}

    Dabei ersetzt du .deine-box-klasse durch die tatsächliche CSS-Klasse der Box.
    So bleiben die Boxen am Desktop sichtbar, werden aber auf Tablets/Handys automatisch ausgeblendet.

    Falls du nicht weißt, welche Klasse deine Box hat: Rechtsklick im Browser > „Element untersuchen“, dann siehst du den Klassennamen.

  • CSS !important

    Hey!

    Das Modal bekommt seine Breite in Bootstrap 4 über die Klasse .modal-dialog gesteuert – dort ist per CSS ein max-width hinterlegt.
    Wenn du nur width überschreibst, bringt das nichts, weil die Bootstrap-Regel stärker ist.

    Lösung:

    CSS
    .modal-dialog {
  max-width: 800px !important;
}

    Oder du gibst deinem Modal eine eigene Klasse (z. B. .modal-dialog.my-modal) und setzt dort die gewünschte Breite.

    Kurz gesagt: In Bootstrap 4 musst du immer mit max-width arbeiten, nicht mit width.

  • E-Mail Briefpapier

    Hey!

    Das Problem ist ganz typisch bei HTML-Mails. Viele Mail-Programme – besonders Outlook und mobile Apps – unterstützen Hintergrundbilder oder modernes CSS nicht zuverlässig. Deshalb verschwindet die Grafik bei manchen Empfängern oder das Layout sieht verschoben aus.
    Als Faustregel: HTML-Mails funktionieren nur stabil, wenn man sie sehr einfach hält → Tabellen für das Layout, Bilder als normale <img>-Elemente und keine Hintergrundgrafiken. Wenn du dein Wappen nutzen willst, setze es lieber als Kopf-Bild ein.

    Ich habe zu diesem Thema auch schon ein paar kleine Artikel zusammengeschrieben, falls es dich interessiert: graecodesigns.de 🙂