• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Media Query für kleine Bildschirme

V

ventura

Neues Mitglied
Die Navigation und der content sollen bei kleineren Auflösung unsichtbar werden.
Das funktioniert nicht.

Media Query für kleinere Bildschirme

@media screen and (max-width: 375px) {
nav, .content {
display: none !important;
visibility: hidden; !important;
}
}

/* Navigation */
nav {
font-family: 'Copperplate', sans-serif;
font-size: 20px;
position: fixed;
top: 0;
width: 100%;

background: linear-gradient(to bottom, #4e4b8d, #a6c9ff);
padding: 20px;
color: white;
display: flex;
justify-content: center;
z-index: 1000;
box-shadow: 0 7px 7px rgba(33, 23, 23, 0.2);
}


/* Inhalt */
.content {
max-width: 1000px;
margin: 120px auto; /* Anpassung für den Abstand zur fixierten Navigation */
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
}


Danke

Thomas
 
Hallo @ventura

Media-Queries sollte immer nach den anderen Regeln kommen, da sie sonst von diesen überschrieben werden (Wie in deinem Fall)

Verschieb' einfach den Query "@media screen and (max-width: 375px)" mit Inhalt
ans Ende deiner Datei.


Hoffe das hilft.
Andreas
 
Wenn es so auch nicht funktioniert liegt es sicher an den !impotant, dadurch setzt sich das CSS über die Einschränkung des max-width hinweg (was ich nicht erwartet hätte). Versuche, die !important zu löschen.
 
media screen einstellungen werden ignoriert



/* Allgemeine Stile */

body {
font-family: 'Gruppo', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to bottom, white, rgba(200, 200, 200, 0.82));
}

/* Navigation */
nav {
font-family: 'Copperplate', sans-serif;
font-size: 20px;
position: fixed;
top: 0;
width: 100%;

background: linear-gradient(to bottom, #4e4b8d, #a6c9ff);
padding: 20px;
color: white;
display: flex;
justify-content: center;
z-index: 1000;
box-shadow: 0 7px 7px rgba(33, 23, 23, 0.2);
}

a {
text-decoration: none;
color: white; /* Textfarbe der Links */
}


/* Grundstil für das Navigationsmenü */
.navbar {
text-align: center; /* Zentriert den Textinhalt innerhalb der Navbar */
}

/* Entfernt Standardaufzählungspunkte und Abstand */
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block; /* Macht die UL zu einem Inline-Block-Element */
}

/* Stile für die einzelnen Menüelemente */
.navbar ul li {
display: inline; /* Stellt die LI-Elemente inline dar */
margin: 0 15px; /* Abstand zwischen den Menüelementen */
}

/* Stil für die Links */
.navbar ul li a {
text-decoration: none;
color: white; /* Textfarbe der Links */

}

nav a {
color: white;
text-decoration: none;
padding: 0.5em 1em;
transition: background-color 0.7s ease;
}

nav a:hover {
background-color: #c5bff7;
border-radius: 4px;
}


/* Inhalt */
.content {
max-width: 1000px;
margin: 120px auto; /* Anpassung für den Abstand zur fixierten Navigation */
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: center;
}

.image-container {
position: relative;
width: 100%;
margin-bottom: 120px;
}

.image-container img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(33, 23, 23, 0.2);
}

.image-container h2, .image-container p {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
text-shadow: 2px 2px 4px rgba(133, 147, 204, 0.5);
background-color: rgba(187, 209, 245, 0.7);
padding: 10px;
border-radius: 10px;
width: 80%;
}

.image-container h2 {
top: 20%; /* Anpassung der Position des Titels */
font-size: 2em;
}

.image-container p {
top: 70%; /* Anpassung der Position des Texts */
font-size: 25px;
padding: 20px;
margin: 0; /* Entfernung unnötiger Margin */
}

@media screen and (max-width: 375px) {
nav, .content {
display: none;
visibility: hidden;
}
}
Zum Vergrößern anklicken....
 

Anhänge

Da kann ich keine Fehler finden. (Ich gehe davon aus, dass dies "media screen einstellungen werden ignoriert" in der originalen Datei nicht drin ist). Hast Du vielleicht irgend welche Inlinestyles im HTML?
 
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<title>Creatives Webdesign</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gruppo&display=swap">
<link rel="stylesheet" href="style.css">
<meta name="google-site-verification" content="dnNKHYkcceCxshpuw9kEJP7pP7fyPfqgEdny3hwLrfg" />
</head>

<body>
<nav class="navbar">
<ul>
<li><a href="#home">Start</a></li>
<li><a href="#services">Technik</a></li>
<li><a href="#about">Dienstleistungen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>

<div class="content">
<section id="home">
<div class="image-container">

<h2>Willkommen</h2>
<p>Dienstleister für die Entwicklung <br> nach Ihren Vorgaben und Anforderungen.
<br> Erfahrung, Kreativität und Know-how.</p>
<img src="pic1.jpg" alt="Bild 1">
</div>
</section>
<section id="services">
<div class="image-container">
<h2>Technik</h2>
<p>Ich arbeite mit macOS an einem Apple Computer, fast so lang es Macs gibt. Dienstleistung die grafische Datenaufbereitung – <br> von dem Entwurf bis zur Herstellung.</p>
<img src="pic2.jpg" alt="Bild 2">
</div>
</section>
<section id="about">
<div class="image-container">
<h2>Webdesign</h2>
<p>Beratung und Konzeption. Screendesign und Webseitenlayout. Gestaltung grafischer Benutzeroberflächen. Bildbearbeitung. <br>Erfahren Sie mehr.</p>
<img src="pic3.jpg" alt="Bild 3">
</div>
</section>
<section id="contact">
<div class="image-container">
<h2>Kontakt</h2>
<p>Thomas Seifermann<br>Obervogt-Häfelin-Str. 35d | 77815 Bühl/Baden<br>Tel.: 0151 41395277<br>
<a href="mailto:[email protected]">[email protected]</a>
<br>Angaben gemäß § 5 TM.</p>
<img src="pic4.jpg" alt="Bild 4">
</div>
</section>
</div>
</body>
</html>
Zum Vergrößern anklicken....
 

Anhänge

Wenn du die Seite auf einem Desktop-Bildschirm in einem Browser anschaust kann es sein, das dein Browser sich überhaupt nicht auf eine Breite von unter 375px zusammenschieben lässt. Das ist zum Beispiel bei meinem Firefox der Fall.

Die meisten Browser bieten Smartphone- oder Tablet-Ansichten um solche schmalen Breiten anzuzeigen.

Das Ausblenden funktioniert bei mir auch.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben