Problem mit einem Media Query

[Mario.Karstaedt]

Moin Leute,

wie aus dem Titel zu erlesen ist, geht es um Media Querys, ganz speziell um einen. (@media screen and (max-width:480px))

2 weitere Media Querys (bis 768px und 1200px) arbeiten anstandslos, nur der letzte macht ärger.
Sobald ich diesen in das Seitenlayout einbinde, wird sogar das Std.-Layout am Desktop überschrieben,
die max-width scheint nicht zu greifen.

Hatte jemand schon so ein oder ein ähnliches Problem?

[Socki]

Hey hast du mal einen Link zur Website?
LG Socke

[Samson1964]

Du musst die Reihenfolge der Stylesheets im Seitenlayout korrigieren.

Gesendet von meinem L52 mit Tapatalk

[Mario.Karstaedt]

@Sam: das bringt leider nichts, aber danke.

Link zur page.

hab das Stylesheet aber momentan aus, damit die Seite halt nicht verzehrt wird. Falls es hilft, sobald ich den #main bearbeiten will, werden andere Anweisungen überschrieben.

[Spooky]

Wir brauchen einen Link zur Seite, wo das Problem zu sehen ist.

[Mario.Karstaedt]

Wir brauchen einen Link zur Seite, wo das Problem zu sehen ist.

Steht doch da..."Link zur page"

[Spooky]

Laut deiner Aussage hast du es aber deaktiviert.

[tab]

Scheint drin zu sein. Im Gegensatz zu den anderen media queries verwendest du aber hier max-device-width statt max-width.

[Mario.Karstaedt]

Scheint drin zu sein. Im Gegensatz zu den anderen media queries verwendest du aber hier max-device-width statt max-width.

Das max-device-width war nur ein Versuch, habs wieder entfernt.

Das Stylesheet ist aktiv, nur alles was #main betrifft ist ausgeblendet, da es die Seite sonst verzehrt.

[Mario.Karstaedt]

Laut deiner Aussage hast du es aber deaktiviert.

Dann hab ich mich wohl nicht richtig ausgedrückt. ^^ sry

[Spooky]

Du musst einen Link zur Seite posten wo man das Problem sieht - bzw. bei deinem bestehenden Link das Problem reproduzieren - nicht entfernen. Wenn das die Live Seite ist, dann lege eine Kopie an und poste den Link zur Kopie.

[Mario.Karstaedt]

Du musst einen Link zur Seite posten wo man das Problem sieht - bzw. bei deinem bestehenden Link das Problem reproduzieren - nicht entfernen. Wenn das die Live Seite ist, dann lege eine Kopie an und poste den Link zur Kopie.

Okay...sry, war wohl müde!

[Mario.Karstaedt]

Hier der Link zur Seite, mit allen querys an.

LINK

[tab]

Hmm, funktioniert soweit ich das sehen kann so wie es soll. Ich sehe in den Entwicklerwerkzeugen z.B., dass bei Breite bis 480px die Höhe des Headers auf 100% gesetzt wird, bei größeren Breiten ist das weg. Was macht es denn jetzt, was dich zu der Meinung veranlasst, dass es nicht funktioniert? Nach welchem Fehler muss man suchen?

Edit: Falls du damit erreichen wolltest, dass der Header die ganze Höhe des sichtbaren Bereichs einnimmt, dann nimm besser 100vh statt 100%.

[Mario.Karstaedt]

Sobald ich im Seiten Layout das @480px aktiviere, wird das Desktop Layout überschrieben und die Breite der Seite auf 85% gesetzt.

[Socki]

Hallo, du hast einen Fehler in deiner CSS.

Sehe dir mal folgendes an...

@media (max-width: 480px) {
/* media-query-480.css */
.
.
.
nav {
height:35px;
background-color:#3E3D40;
position: relative;
list-style: none;
padding: 0;
border: 0;
font-size: 1em;
text-align: center;
}
}<- Falsch
.nav_toggle:before {
left:100px;
position:fixed;
content: url("/tl_files/img/burger.png");
height:25px;
width:25px
}
.
.
.
} 
/*query ende;*/

[tab]

Hier hast du hinten eine Klammer zuviel geschlossen.

.nav_toggler{display:block;    height: 25px;    width: 25px;    position:relative;    	color:#796432}nav{height:35px;    background-color:#3E3D40;position: relative;    list-style: none;    padding: 0;    border: 0;    font-size: 1em;    text-align: center;}}

[mlweb]

Sobald ich im Seiten Layout das @480px aktiviere, wird das Desktop Layout überschrieben und die Breite der Seite auf 85% gesetzt.

Um der Community eine Möglichkeit zur Untersuchung zu geben, solltest Du aber wie schon mehrfach erwähnt diese mediaqueries auch tatsächlich so aktivieren, dass die von Dir bemängelten Fehler auch sichtbar sind.

Ich habe genauso wie @tab schon mal drauf geschaut. Die width für den #wrapper steht in der Desktopversion auf 100%, die Breite für #main .inside ist auf 965px festgelegt, was ich persönlich zwar als suboptimal ansehe, aber das ist ja nicht Dein Problem.

[Mario.Karstaedt]

Hallo, du hast einen Fehler in deiner CSS.

Sehe dir mal folgendes an...

@media (max-width: 480px) {
/* media-query-480.css */
.
.
.
nav {
height:35px;
background-color:#3E3D40;
position: relative;
list-style: none;
padding: 0;
border: 0;
font-size: 1em;
text-align: center;
}
}<- Falsch
.nav_toggle:before {
left:100px;
position:fixed;
content: url("/tl_files/img/burger.png");
height:25px;
width:25px
}
.
.
.
} 
/*query ende;*/

Hier hast du hinten eine Klammer zuviel geschlossen.

.nav_toggler{display:block;    height: 25px;    width: 25px;    position:relative;    	color:#796432}nav{height:35px;    background-color:#3E3D40;position: relative;    list-style: none;    padding: 0;    border: 0;    font-size: 1em;    text-align: center;}}

Das wars! Klasse Leute, manchmal sieht man den Baum, vor lauter Wald nicht mehr!

DAUMEN HOCH!