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

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Antworten
Drechsler-Forum
Mitglied
Beiträge: 23
Registriert: 20.12.2018 08:05

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

Beitrag 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 !
vfrblue
Ehemaliges Teammitglied
Beiträge: 1993
Registriert: 22.11.2016 18:46

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

Beitrag 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.
Verschoben von Support-Forum nach Styles, Templates und Grafiken am 24.12.2018 21:30 durch vfrblue

Drechsler-Forum
Mitglied
Beiträge: 23
Registriert: 20.12.2018 08:05

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

Beitrag von Drechsler-Forum »

Hallo Hermann,

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

Gruß Arno
Antworten

Zurück zu „Styles, Templates und Grafiken“