Seite 1 von 1

[3.2] Andere Größe für Bilder im Header bei mobilen Geräten

Verfasst: 24.12.2018 20:48
von Drechsler-Forum
Hallo,
ich habe im Header einige Button mit 120 x 48 px eingebettet.
Diese möchte ich, wenn mobil auf mein Forum zugegriffen wird, auf zB 60 x 24 px setzen.

In der colors.css habe ich

Code: Alles auswählen

.rahmen {
	width: 120px;
	height: 48px;
	border: 1px solid #660000;
	}
für die Bilder im Header abgelegt.
Das passt soweit.

Lege ich in die responsive.css

Code: Alles auswählen

.rahmen {
	width: 60px;
	height: 24px;
	border: 1px solid #660000;
	}
sind die Bilder auch am PC kleiner.

Wo muss ich ansetzen das die Bilder auf mobilen Geräten kleiner angezeigt werden?

Besten Dank !

Re: [3.2] Andere Größe für Bilder im Header bei mobilen Geräten

Verfasst: 24.12.2018 21:29
von vfrblue
Welchem Bereich (@media (max-width: xxx)) hast du denn deine Anpassungen in der responsive.css zugeordnet?
In deinem Fall würde ich es bei @media (max-width: 700px) und eventuell auch bei @media (min-width: 701px) and (max-width: 950px) einfügen.
Danach den Browser-Cache (eventuell auch den Foren-Cache über ACP) löschen.

Zur Info:
Ich würde die zusätzlichen css-Änderungen in einer separaten Datei speichern (z.B. drechsel.css) und diese Datei in den "theme"-Ordner hoch laden. Dann diese Datei in der stylesheet.css unten anfügen

Code: Alles auswählen

@import url("drechsel.css?v=3.2");
So kannst du einfach bei einem Style-Update diese beiden Schritte durchführen, ohne Änderungen an den originalen Dateien vornehmen zu müssen.

Re: [3.2] Andere Größe für Bilder im Header bei mobilen Geräten

Verfasst: 25.12.2018 08:06
von Drechsler-Forum
Hallo Hermann,

besten Dank! Das wars.
Und danke für den zusätzlichen Tipp!

Gruß Arno