Randabstand bei kleineren Viewports

[Twitt]

Hallo ins Forum

Ich bin gerade an einer Onlinestellung dieser Website.

Neben Contao 3.5.28 verwende ich das EUF-Grid und habe dem Footer und Wrapper padding links/rechts: 0.9375rem gegeben, damits bei kleineren Viewports nicht am Rand klebt. Alles schön und gut, nur die dicke blaugrüne Linie unterhalb des Headers ist dann immer etwas breiter.

Bei grösseren Viewports kann ich einfach die paddings weglassen und alles ist perfekt. Was mache ich aber, damit ich bei kleineren Viewports einen gleichmässigen Abstand habe? Mit der rem-Variante passiert nichts, wenn dann nur mit Pixeln aber auch das bringt mir nicht die Lösung

Hat jemand einen Vorschlag?

Herzlichen Dank.

[Andreas]

Entweder alles nochmal überdenken und das Padding z.B. dem Wrapper geben oder dem Header. Oder mit Margin arbeiten anstatt mit Padding. Oder anstatt des Borders ein Pseudoelement benutzen.

#header .inside::after {
	content: '';
	position: absolute;
	background: #004253;
	height: 18px;
	width: calc(100% - 2 * .9375rem);
	bottom: 0;
	left: .9375rem;
}

Dir muss auf jeden Fall klar sein, dass wenn du einen Border auf ein Element mit Padding legst, der Border sich immer außerhalb des Paddings befinden wird. Dass du die Paddings auf die .inside gelegt hat ist auf jeden Fall erstmal richtig. Wobei man das .inside im Header oft manuell an das jeweilige Design anpassen muss und dieses auch schonmal gar kein Padding bekommt.

[Twitt]

Danke dir Andreas

Hmm, wie meinst du das?
Die .inside's sind doch bei Contao standardmässig vertreten?

Verstehe nicht ganz was du meinst.

Wobei man das .inside im Header oft manuell an das jeweilige Design anpassen muss und dieses auch schonmal gar kein Padding bekommt.

[mlweb]

Ich denke @Andreas meint das css für die Klasse .inside.

[Andreas]

Ja, normalerweise will man einen Abstand zu den Rändern und vergibt.

.inside {
  padding: 2rem;
} 

Aber je nach Layout/Design muss man schonmal das .inside im Header getrennt behandelt. Z.B.

header .inside {
  padding: 2rem 0;
} 

Du hättest das wahrscheinlich auch ohne das ::after lösen können. Z.B. so

header .inside {
  padding: 0;
  margin: 0 .9375rem;
} 

ps Achtung, du benutzt unnötig starke Selektoren, das ist nicht so gut. Z.B.

#wrapper .inside {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
} 

.inside würde hier auch reichen.

[Twitt]

Hallo Andreas

Danke dir für die Tipps. Es funtioniert tatsächlich nur mit .inside. Du meinst auch z.B. «#header .logo» ist keine gute Wahl also wenn die nächst obere ID voranggestellt wird?

ps Achtung, du benutzt unnötig starke Selektoren, das ist nicht so gut. Z.B.

#wrapper .inside {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
} 

.inside würde hier auch reichen.

[Andreas]

Hallo Twitt, ja das meine ich.

Grundsätzlich sollten Selektoren immer so schwach wie möglich sein. Dann kann man sie später leichter überschreiben. Mal als Beispiel: Ich habe ein Element mit der Klasse .my_box in denen auch H1 Elemente sind.

h1 {
  font-size: 2rem;
}
.my_box h1 {
  font-size: 1rem;
} 

Mein spezieller Selektor muss stärker, oder gleichstark sein. Das hier reicht jetzt nicht mehr aus.

#main h1 {
  font-size: 2rem;
}
.my_box h1 {
  font-size: 1rem;
} 

Der zweite Selektor muss jetzt so aussehen

#main h1 {
  font-size: 2rem;
}
#main .my_box h1 {
  font-size: 1rem;
}
/* oder */
#top .my_box h1 {
  font-size: 1rem;
} 

Es ist so, dass je tiefer man in den DOM hinabsteigt, desto stärker werden aus Erfahrung die Selektoren. Es gibt sogar Generatoren, mit welchen man sich das für sein CSS grafisch darstellen lassen kann. https://jonassebastianohlsson.com/specificity-graph/

Also sollten die ersten Selektoren für das Grundgerüst und die Default-Elemente erstmal so schwach wie möglich sein.

Hier https://specificity.keegan.st/ kann man sehr schön die Stärke eines Selektors visualisieren und direkt mit einem anderen Selektor vergleichen. Sone Seite braucht man nicht für seine Arbeit, ist aber sehr schön, wenn man noch nicht viel über die Specificity (Stärke) von Selektoren gehört oder gewusst hat. Am Ende macht man das sowieso nach Gefühl, ich denke nicht, dass es einen CSS-Programmierer gibt, welcher die Specificity seiner Selektoren kennt.

Sorry, bin etwas abgedriftet. Kurz: Deine .inside sind sowieso alle innerhalb des #wrapper. Wieso also #wrapper davor setzen. Wenn du nur .inside benutzt, dann sprichst du genauso alle .inside auf der Seite an.

[mlweb]

Die Links waren mir neu. Schön um Spezifität für "Anfänger" zu visualisieren

Ich gehöre übrigens zu denen, die immer mal wieder die Spezifität eines Selektoren errechnen.

Edit: Und zwar ohne Hilfsmittel. Irgendwie ist mir das in meiner Anfangsphase fast in Fleisch und Blut übergegangen, nach dem ich Peter Müllers Erklärungen über die Spezifität gelesen habe.

[Twitt]

Hallo Andreas

Danke dir für deine Links.

Hallo Twitt, ja das meine ich.
Es ist so, dass je tiefer man in den DOM hinabsteigt, desto stärker werden aus Erfahrung die Selektoren. Es gibt sogar Generatoren, mit welchen man sich das für sein CSS grafisch darstellen lassen kann. https://jonassebastianohlsson.com/specificity-graph/

Also sollten die ersten Selektoren für das Grundgerüst und die Default-Elemente erstmal so schwach wie möglich sein.

Hier https://specificity.keegan.st/ kann man sehr schön die Stärke eines Selektors visualisieren und direkt mit einem anderen Selektor vergleichen. Sone Seite braucht man nicht für seine Arbeit, ist aber sehr schön, wenn man noch nicht viel über die Specificity (Stärke) von Selektoren gehört oder gewusst hat. Am Ende macht man das sowieso nach Gefühl, ich denke nicht, dass es einen CSS-Programmierer gibt, welcher die Specificity seiner Selektoren kennt.

Sorry, bin etwas abgedriftet. Kurz: Deine .inside sind sowieso alle innerhalb des #wrapper. Wieso also #wrapper davor setzen. Wenn du nur .inside benutzt, dann sprichst du genauso alle .inside auf der Seite an.