CSS seltsames Verhalten

Question

Ich style eine Website und habe einige h3-Header und Absätze, die in einer div-Klasse namens "featured-info" verpackt sind. Auch ich habe ein Fußzeilenelement, das in der Hauptverpackung im Körper ist. Die Absätze sind kursiv gesetzt:

.featured-info p { 
    font-style: italic; 
} 

und die Fußzeile hat eine Grenze:

footer { 
    border-top: 1px solid rgb(128, 128, 128); 
} 

Auch der Fußzeile Text ist ein h4 groß geschrieben:

footer h4 { 
    text-transform: uppercase; 
} 

Das Hauptproblem ist, dass Ich habe eine Einstellung: @media Bildschirm und (min-width: 750px), die einige Navigationstasten inline macht und die Größe eines Textes ändert, aber ... wenn die Seite siz e ist kleiner als 750px das footer styling und die kursive schrift verschwindet ... und ich verstehe nicht warum. Ich werde mehr Informationen zur Verfügung stellen, wenn es benötigt wird. Danke!

LE: gefunden. ein verdammtes Semikolon. DANKE EUCH ALLEN! Ich habe nicht erwartet, in so kurzer Zeit so viele Antworten zu bekommen.

jetzt habe ich ein anderes Problem

unter dem Menü, das ändert sich, wenn die Auflösung min ist 750px i eine h1 Header haben, die in der Regel in der Mitte ist

h1 { 
    font-size: 2.4213em; /*3.3684em*/ 
    line-height: 1.2656em; 
    margin-top: 0.4219em; 
    margin-bottom: 0; 
    color: rgb(172, 140, 71); 
    text-align: center; 

} 

das Problem ist, es nach rechts bekommt wenn das Fenster von 750px zu 950px ist. Ich habe diese Einstellungen:

@media screen and (min-width: 750px){ 

    .main-navigation { 
     min-height: 90px; 
     border-bottom: 1px solid rgb(36,36,36); 
     border-top: 1px solid rgb(36,36,36); 
     /*overflow: hidden; dubiosssss */ 
    } 

    .main-navigation ul { 
     max-width: 950px; 
     margin: 0 auto; 

    } 

    .main-navigation li { 
     float:left; 
     margin-left: 20px; 
     width: 20%; 

    } 

    .main-navigation a { 
     background: none; 
    } 
} 
/* media query for 750*/ 
} 
@media screen and (min-width: 950px){ 

    .main-navigation ul { 
     position: relative; 
     right: -15px; 
    } 

} 

jeder Hinweis wäre toll, noch einmal vielen Dank!

Answer 1

min-width in einem @ media-Parameter bedeutet, dass jede Größe von der angegebenen Größe und größer wird die Stile, die Sie festlegen.

Es klingt wie Sie haben einige Ihrer Stile sind an der falschen Stelle. Es ist normalerweise besser, klein zu beginnen und in Ihrem CSS groß zu werden. Dies bedeutet, dass Sie zuerst globale Stile (Stile, die sich nicht ändern) angeben und sich dann zu großen Ansichtsfenstern hocharbeiten.

Sie überschreiben wahrscheinlich einige Stile, die Sie behalten möchten.