Tabellen bei mobiler Ansicht untereinander

astratr

Hallo Leute,

ich habe eine Tablle mit folgender Struktur. Zwei Spalten je 4 Zellen

Ich möchte dass die Zellen bei Mobiler Ansicht untereinander sind.

Ich habe verucht es so zu lösen, aber es geht nicht.

Code

@media screen and (max-width: 900px) { 
.logo_cell { width: 100%;}

Kann mir jemand helfen?

Hier die CSS

Code

.logo_table {
    display: table;width: 100%;
  }
  .logo_row {
    display: table-row;
  }
  .logo_cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 25%;
  }

Alles anzeigen

Hier die PHP

PHP

<div class="logo_table">
 <div class="logo_row">
  <div class="logo_cell">CELL A</div>
  <div class="logo_cell">CELL B</div>
  <div class="logo_cell">CELL C</div>
  <div class="logo_cell">CELL D</div>
 </div>
  <div class="logo_row">
  <div class="logo_cell">CELL AA</div>
  <div class="logo_cell">CELL BB</div>
  <div class="logo_cell">CELL CC</div>
  <div class="logo_cell">CELL DD</div>
 </div>
</div>

Alles anzeigen

LG

Andreas

Werbepost

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

b3317133

Probier mal das:

Code

@media screen and (max-width: 900px) { 
    .logo_cell {
        display: block;
        width: 100%;
    }
}

astratr

Ja .. perfekt :D

Das geht.

Kann man auch erzwingen dass bei der Mobilen Ansicht statt 4 nur 2 Zellen dafür aber dann 4 statt 2 Spalten vorhanden sind?

b3317133

Etwa so?

Code

@media screen and (max-width: 900px) { 
    .logo_cell {
        display: inline-block;
        width: 50%;
        float: left;
    }
}

astratr

Ich meine auf die oben beschriebenen Ausgangssituation

Wenn ich das CSS wie von die beschrieben anpasse habe ich zwei Spalten. Aber nur die Linke ist beschrieben,.

b3317133

"nur die Linke ist beschrieben"? Verstehe ich nicht ganz. Klappt es hier? http://jsfiddle.net/1s4exgzd/

astratr

Nein, leider nicht.
Bei mir ist alles übereinander.

http://www.astra-web.de/

Es geht um die Logos über der Karte

Gruß Andreas

b3317133

Das liegt an Deinem 1px padding, das im o.g. Beispielcode fehlt. Setze das links/rechts padding auf 0 im Media block...

Code

@media screen and (max-width: 900px) { 
    .logo_cell {
        display: inline-block;
        width: 50%;
        float: left;
       padding-left: 0;
       padding-right: 0;
    }
}

astratr

Danke Danke .. das war es :D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Tabellen bei mobiler Ansicht untereinander

Jetzt mitmachen!