Bilder und Texte nebeneinander auf Endgeräten angepasst

[TK_2019]

Hallo,

ich bin neu hier und habe leider nicht allzugroßes Fachwissen im Bereich HTML und CSS..

Ich soll für einen Shop eine Beschreibung entwerfen die aus Bildern und Texten besteht, die nebeneinander angezeigt werden sollen.

Ich dachte eigentlich an eine Tabelle mit 2 Spalten und dann auf der einen Seite ein Bild und auf der anderen den Text und in der 2ten Zeile der Tabellee dann anderes herum (rechts/links vertauscht).

Leider bekomme ich es aber nicht hin, dass dies dann immer auf die entsprechende Anzeige (je nach Bildschirm) verkleinert wird. Der Text schiebt sich zusammen aber das Bild verändert die Größe einfach nicht.

Man muß dann leider immer scrollen was ja blöd ist

Das andere Problem ist dann noch, dass dieser Quellcode auch ebay konform sein sollte, da die Shop Artikel noch zu ebay hochgeladen werden sollen mit dieser Beschreibung.


Ich habe natürlich schon gegoogelt aber das mit dem Bild bekommen ich einfach nicht hin

Danke für Tipps

 

[werresal]

Schau dir Mal CSS flexbox an, das ist genau für deinen Fall.

Dafür gibts auch webseite die dir den ganzen code generieren. Bilder werden dann automatisch resized, man kann zeilenumbrüche etc einstellen.
Suche einfach mal mit google nach Css flexbox Generator

 

[TK_2019]

Danke für den Tipp.. aber leider klappt das mit den Bilder nicht.. es verändert von allem die Größe und passt es an.. aber sobald ich einen Bildlink einfüge bleibt dieser stur auf der Größe und verkleinert sich nicht..

<style>
.flex-container {
display: flex;
flex-direction: column;
}
/* große Viewports */

@media all and (min-width: 30em) {
.flex-container {
flex-direction: row;
}
}

.flex-item {
border: 1px solid;
margin: .5em;
padding: .5em;
background: #eef2f5;
}
</style>

<main class="flex-container">
<section class="flex-item">
<h2>Text</h2>
<p><img src="Bildlink über https und als png"></p>
</section>
<section class="flex-item">
<h2>Text</h2>
<p>Text Text Text Text Text</p>
</section>
</main>

Was mache ich hier falsch?

 

[werresal]

Du mußt dem Image auch einen CSS Tag zuweisen, im Moment hat es keinerlei Regeln.

z.b.

.flex-item img{

width:100%;
height: auto;

}

Dann sollte es immer 100% des FelxItems haben und die größe ist automatisch.



BZW check mal das Codenbeispiel von hier:



https://codepen.io/sashatran/pen/9535b178fbfd0b55406a3d68edd639fd









Grüße

 

[TK_2019]

Danke.. so klappt alles