3 Reihen (Columns) responsive machen?

[hungsk8dlx]

Kann mir jemand schnell auf die Sprünge helfen? Der Code unten ergibt 3 Spalten, 2 Reihen.
Das sind dann 3 Bilder nebeinander mit Überschrift (die unter dem Bild ist).
Das sieht soweit auch gut aus aber wie mache ich das jetzt responsive, so dass auf kleineren Geräten die Bilder nicht mehr nebeneinander sind?

<tr style="text-align: center;">
  <td style= "background: rgba(74, 142, 128, .15)">
    <table width = "100%">
    
 
      <tr>
          <td><a href="https://www.markt11.de/17-schokolade"  target="”_blank”"><img src="#" width="110px"
              style="max-width: 110px; border-radius: 55px;"></a></td>
          <td><a href="#"  target="”_blank”"><img src="#"  width="110px"
              style="max-width: 110px; border-radius: 55px;"></a></td>
          <td><a href="#"  target="”_blank”"><img src="#" width="110px"
                style="max-width: 110px; border-radius: 55px;"></a></td>
      </tr>

      <tr>
        <th>Überschrift1</th>
        <th>Überschrift2</th>
        <th>Überschrift3</th>
    </tr>

      </table>
  </td>
</tr>

 

[Sempervivum]

Eine Tabelle ist immer schlecht geeignet, wenn es darum geht, etwas responsiv zu machen. Verwende statt dessen Gridlayout:
https://css-tricks.com/snippets/css/complete-guide-grid/

3 Zellen nebeneinander:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Alle Zellen untereinander:

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
}

Abhängig von der Breite des Browserfensters kannst Du dann mit einer Mediaquery umschalten:
https://www.mediaevent.de/css/media-queries.html

Und für die Bilder mit der Überschrift darunter jeweils ein figure-Tag verwenden:
https://wiki.selfhtml.org/wiki/HTML/Elemente/figure
Die Überschrift ist dann das figcaption.

 

[hungsk8dlx]

Eine Tabelle ist immer schlecht geeignet, wenn es darum geht, etwas responsiv zu machen. Verwende statt dessen Gridlayout:
https://css-tricks.com/snippets/css/complete-guide-grid/

3 Zellen nebeneinander:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Alle Zellen untereinander:

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
}

Abhängig von der Breite des Browserfensters kannst Du dann mit einer Mediaquery umschalten:
https://www.mediaevent.de/css/media-queries.html

Und für die Bilder mit der Überschrift darunter jeweils ein figure-Tag verwenden:
https://wiki.selfhtml.org/wiki/HTML/Elemente/figure
Die Überschrift ist dann das figcaption.

Danke sehr, aber wie sieht der HTML Part entsprechend zu dieser Lösung mit dem Gridlayout aus?

 

[hungsk8dlx]

Und mal anders gefragt, wenn man das ganze Layout bisher mit Tables gebaut hat, funktioniert das ja nicht mehr oder? Man brauch ja <div> für das GridLayout. Das würde dann außerhalb meiner Tabelle angezeigt werden.

 

[scatello]

Danke sehr, aber wie sieht der HTML Part entsprechend zu dieser Lösung mit dem Gridlayout aus?

Was hast du denn bisher versucht? Eigentlich hast du gute Infos bekommen, du musst nur mal anfangen, diese zu nutzen. Erwarte nicht, dass dir hier jemand deinen HTML-Code umschreibt.

 

[hungsk8dlx]

Hey ! überlass das doch den Leuten wie weit sie mit ihrer Hilfe gehen wollen. Das ist jedem siene eigene Entscheidung. Der ein oder andere hat vielleicht Lust mir ganz konkret mit Code zu helfen.

 

[scatello]

Du verstehst den Sinn von Foren nicht. In Foren bekommt man Hilfe zur Selbsthilfe, nicht mehr und nicht weniger. Wenn du dich selber nicht ernsthaft mit dem Thema beschäftigen willst, denn kannst du ja eine Anfrage in der Jobbörse aufgeben. Wie kommt man nur darauf, dass man in einem Forum "hier" schreien muss und man dann eine fertige Lösung auf dem Silbertablett serviert bekommt? Oder kommst du bei mir vorbei und wäscht mein Auto?

 

[hungsk8dlx]

Beruhig dich! Ein weiterer Fall von "Dinge die man nie jemandem persönlich vor Ort sagen würde"

 

[scatello]

Nimm das https://www.w3schools.com/css/tryit.asp?filename=trycss_grid und das https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_figure und bastele das nach deinen Vorstellungen zusammen. Das ist relativ einfach und mit etwas Eigeninitiative auch für Anfänger zu schaffen. Man muss nur mal selber wollen.

 

[Sempervivum]

Danke sehr, aber wie sieht der HTML Part entsprechend zu dieser Lösung mit dem Gridlayout aus?

Und mal anders gefragt, wenn man das ganze Layout bisher mit Tables gebaut hat, funktioniert das ja nicht mehr oder? Man brauch ja <div> für das GridLayout. Das würde dann außerhalb meiner Tabelle angezeigt werden.

Mit dem HTML einer Tabelle funktioniert Gridlayout natürlich nicht, Du musst auch das HTML ändern.
Aber das ist ja das geniale dabei, dass man nur noch den Gridcontainer und die Griditems braucht:

    <div class="grid-container">
        <figure class="item">
            <img src="deinbild.jpg">
            <figcaption>Die Beschreibung</figcaption>
        </figure>
        <figure class="item">
            <img src="deinbild.jpg">
            <figcaption>Die Beschreibung</figcaption>
        </figure>
        <figure class="item">
            <img src="deinbild.jpg">
            <figcaption>Die Beschreibung</figcaption>
        </figure>
    </div>