Layout soll sich an Bildschirmgröße anpassen - Spalten ignorieren

    Hallo zusammen,

    ich bin neu hier im Forum und komme auch gleich mit einem Problem.

    Ich habe eine Wordpress-Webseite und benötige etwas CSS-Anpassungen. Ich habe meine Seiten mit dem Wordpress-Editor erstellt. Auf einer Seite habe ich zum Beispiel einen Text stehen. Da ich nicht wollte dass dieser die ganze Breite des Bildschirms einnimmt, habe ich drei Spalten erstellt und den Text in die mittlere Spalte geschrieben.
    Wenn ich die Seite jetzt am Handy anschaue, dann hätte ich aber gerne, dass der Text die volle Bildschirmbreite einnimmt. Ich benötige eine CSS-Regel, die quasi die äußeren Spalten ignoriert, wenn der angegebene Breakpoint erreicht wurde.
    Gibt es esine Möglichkeit, wie ich das umsetzen könnte?

    Vielen Dank vorab und viele Grüße:)

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Oh ja klar, selbstverständlich:
    URL: https://center-engineering.de/
    WordPress Version: 6.11
    Theme: Vantage

    Ich weis nicht ob das für euch interessant ist, aber die Schriftgröße ändert sich schon mit der Bildschirmgröße automatisch. Das habe ich so gelöst:

    Grundsätzlich wären da Media Queries zuständig ;)
    Damit kannst du ab einem Breackpoint verschiedene Dinge umsetzen. Verschiedene Dinge deswegen, weil man die über CSS ansprechen kann.
    Wenn die 3 Spalten die selbe CSS hat kanns schwirig werden...
    Aber wie @threadi geschrieben hat, mit einem Link (wie in den Forenregeln Pkt 2) kann man das sehen.

    Nachtrag: Bei Spalten kann der Nachteil eintreten, dass bei Media Queries, die Spalten im schmalen Design untereinander gereiht werden.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Danke für die Antwort.

    Ich kann, den Spalten ja einen Namen geben, mit dem ich sie mittels CSS ansprechen kann. Soll ich dann "einfach" die Breite = 0 setzen wenn der Breakpoint erreicht wird?

    Ich habe im Wordpress Editor die Option das ich das Staplen der Spalten ausschalten kann, das habe ich auch gemacht, denn gestapelt sah es aif einem kleinen Display auch doof aus :confused:

    Du könntest die Seitenspalten (z.B Class"[FONT=Courier New]my_sidebars[/FONT]" taufen und mit CSS [FONT=Courier New].my_sidebars {display: none;}[/FONT] ausblenden - ab einer bestimmten Breite lt MediaQueries.

    Code
    @media (min-width: 768px) {
.my_sidebars {
  display: none;
  }
}

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Das hört sich gut an.
    Nur jetzt muss ich noch einmal doof fragen, kann es sein, das ich einer leeren Spalte keinen Namen zuweisen kann?
    Ich habe so etwas ähnliches schon mal gemacht im Footer, da konnte ich Namen zuweisen und die dann mit CSS bearbeiten, zum Beispiel so:

    Code
    .Location{
  display: grid;
   justify-content: center;
}

    Den Namen hatte ich im Editor zugewiesen, nur finde ich bei den leeren Spalten dafür kein Feld. Ist es jetzt einfach zu spät und ich sollte ins Bett oder muss ich anders vorgehen?

    Vielen Dank.

    Also ich konnte das machen, allerdings auf einer meiner Testinstallationen, sieht so aus:

    Mit dem schwarzen Listensymbol sieht man den Aufbau des Spaltenblocks.
    In der ersten, blau markierten Spalte siehst du rechts unten, unter "Erweitert" den Eintrag der CSS-Klasse [FONT=Courier New]my_sidebars[/FONT]. Das kann ich auch nachträglich bearbeiten. Die mittlere Spalte hat die Klasse [FONT=Courier New]my_text[/FONT], un die auch ansprechen zu können.

    bei den Zusätzlichen CSS eingetragen:

    CSS
    @media (max-width:782px) { 
.my_sidebars {
    display: none;
}
.my_text {
    flex-basis: 100% !important;
    }
}

    ..... kleiner Fehler oben: min-width auf max-width geändert ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Vielen Dank. Das mit den "CSS-Klassen" hatte ich tatsächlich gefunden, weil sich nichts geändert hat (habe den Code mit "min" nur blind kopiert), dachte ich, dass das das falsche Feld ist um Namen zu vergeben.

    Jetzt funktioniert es :)
    Vielen Dank für die schnelle Hilfe!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden