Gunnar Bittersmann: Bekomme Responsive-Design nicht hin

Beitrag lesen

@@Markus Steffen

Rolf ja schon eine Layoutmöglichkeit gezeigt, hier nun eine andere – die einfachere: CSS Grid. Da legt man (fast) alles fürs Containerelement fest; die Kindelemente muss man gar nicht anfassen.

Wie Rolf schon sagte, kann body oder main das Containerelement sein. In meinem Beispiel ist es main.

Bei einem PC soll eine Grafik 2/3 des Bildschirms einnehmen (volle Höhe, 66% der Breite), daneben (den restlichen 33%) soll Text dargestellt werden.

	main
	{
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 1em;
	}

teilt den Container in zwei Spalten, wobei die erste (2fr) doppelt so breit ist wie die andere (1fr).

Damit der Text nicht am Bild klebt, etwas Zwischenraum (gap) dazwischen.

Der Text soll eine Mindestbreite haben, damit er sich nicht zusammenschiebt, wenn das Fenster skaliert wird.

Kleine Abwandlung:

	main
	{
		display: grid;
		grid-template-columns: 2fr minmax(15em, 1fr);
		gap: 1em;
	}

legt für die zweite Spalte eine Mindestbreite von 15em fest.

Die Grafik soll sich automatisch skalieren bis zu einer Mindestbreite/Höhe,

img
{
	width: 100%;
	height: auto;
}

dann soll die Grafik und der Text untereinander dargestellt werden.

In Mobile-first-Denke: Erst must du gar nichts tun, weil untereinander schon das Verhalten ohne Zutun ist.

Dann, ab einer bestimmten Viewportbreite (in meinem Beispiel 40em) soll’s anders sein. Also obige Regel in ein media query gepackt. (Und wie Rolf sagte: in em!)

@media (min-width: 40em)
{
	body
	{
		display: grid;
		grid-template-columns: 2fr minmax(15em, 1fr);
		gap: 1em;
	}
}

Das war’s dann auch schon. Der Rest ist Schmuck am Kleid.

Kein Schmuck hingegen:

<!DOCTYPE html>
<html>

Da fehlt die Angabe der Sprache. <html lang="de"> für Deutsch.

LLAP 🖖

--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

—Marc-Uwe Kling