Zwei Spalten je 50%, wenn Auflösung zu gering untereinander

    Hallo Leute, ich habe eine Frage. Bekomme es einfach nicht.

    Ich nutze Contact Form 7, hier möchte ich zwei Spalten haben die nebeneinander sind.

    Wenn die Auflösung kleiner wird ( Tablet oder Smartphone ) sollen die beiden Spalten untereinander sein. Das klappt auch. Aber leider sind sie dann nur 50% breit.

    Hat jemand eine Idee wir ich das umsetzen kann?

    Die Seite ist http://www.handy-doktor-trier.de

    Gruß

    PHP
    <div id="rahmen" class="one_half">
    ....
</div>
<div id="rahmen" class="one_half">
   ....
</div>
    Code
    #rahmen {background-color: #f9f9f9; border: 1px solid #d6d6d6; border-radius: 12px; padding: 10px 10px 0px 10px; margin-bottom: 15px;height:auto;}
.clr { clear: both; }
.one_half {width: 48,7%}
    • 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

    Die Klasse .one_half wird in der (vermutlich vom Theme mitgelieferten) CSS-Datei style-responsive.css bereits für kleinere Auflösungen mit width: 100% angegeben. Deine Änderung überschreibt alles, da du sie keinem Media Query speziell zugeordnet hast. Versuchs mal hiermit:

    Code
    [COLOR=#000000]@media only screen and (min-width: 960px) { 
[/COLOR].one_half { width: 100%; }
[COLOR=#000000]}[/COLOR]

    Das am Besten am Ende einfügen, wo du deine nachträglichen Änderungen eingetragen hast. :)

    Ja danke. Genauso ist es.
    Die Klasse wurde vom Theme mitgeliefert.
    Aber nun funktioniert es .. danke.

    Eine Frage habe ich noch.

    Nur wenn in der Klasse .one_half der Wert bei 45% ist werden die beiden Container nebeneinander angezeigt.
    Hat jemand eine Idee wo mir die 10% verloren gehen?

    Gruß

    Um die volle Breite auszunutzen müsstest du der Klasse .one_half das geben:

    Code
    box-sizing: border-box;

    Dann kannst du die Breite des Containers auf 50% stellen. Die Border werden dann dort mit eingerechnet. So wie es jetzt ist werden die Border zusätzlich zu der Breite gezählt, was dann die Differenz ausmacht (genauer nur 4%, weil man die Container ohne box-sizing auf maximal 48% hochstellen kann, ohne das sie umbrechen).

    Huhu ..
    Das stimmt. Zwischen den Containern soll ein Abstand sein.
    Ich möchte dass der Rechte Container rechtsbündig.
    Jetzt ist der Abstand zwischen den Containern richtig. Aber Rechts ist Platz.
    Wenn ich die Container breiter mache springt der 2. Container nach unten.

    Gruß

    In dem Stylesheet style-shortcodes.css wird der Klasse .one_half der margin-right mit 2,6% gegeben. Das gilt dann natürlich für alle Elemente, die diese Klasse verwenden, z. B. auch die Spalten in deinem Footer. Ich würde folgendes machen:

    Code
    .wpcf7 .one_half {
width: 49%;
box-sizing: border-box;
margin-right: 0;
}


.wpcf7 .last {
margin-left: 2%;
}

    Damit die Änderungen nur im Kontaktformular auftreten habe ich zusätzlich die Klasse .wpcf7 davor gesetzt, die die Container umschließt. Somit sollten andere Elemente mit der Klasse .one_half unberührt bleiben.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden