Media Query überschreibt den ursprünglichen Stil nicht

Ich habe eine Medienabfrage, um das Aussehen einer Fußzeile zu ändern, wenn die Website mobil wird, aber aus irgendeinem Grund scheint es nicht, die Medienabfrage Stile über die zu nehmen ursprünglicher Grundstil. Die spezifische CSS-Code ist alsMedia Query überschreibt den ursprünglichen Stil nicht

.footy { 
    background-repeat: no-repeat; 
    background-image: url('../Images/LandingBottomRightCorner_FullSpan.png'); 
    background-position-x: right; 
    min-height: 338px; 
    position: relative; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    overflow: hidden; 
} 

.footytext { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    text-align: center; 
    margin: 13px; 
} 

.footytextelement { 
    color: white; 
    font-size: 18pt; 
    font-family: Arial; 
    font-weight: bold; 
} 

.joinnow { 
    border: 3px solid white; 
    border-radius: 12px; 
    font-style: italic; 
    margin: 10px; 
} 


.footytext a:hover { 
    text-decoration: none; 
} 


@media (max-width: 1279px) { 

/*FOOTER APPEARANCE MOBILE*/ 
    .footy { 
     background-repeat: repeat-x; 
     background-image: url('../Images/MBLLandingFooterGradient_ForRepeat.png'); 
     height: 338px; 
     position: relative; 
     width: 100%; 
     overflow: hidden; 
    } 

.footytext { 
    position: center; 
    text-align: center; 
    margin: 13px; 
} 

.footytextelement { 
    color: white; 
    font-size: 16pt; 
    font-family: Arial; 
    font-weight: bold; 
} 

.joinnow { 
    border: 3px solid white; 
    border-radius: 12px; 
    font-style: italic; 
    margin: 10px; 
} 


.footytext a:hover { 
    text-decoration: none; 
} 
}

folgt

Die HTML ist manipuliert:

<div class="footy"> 
    <div class="footytext"> 
     <div class="footytextelement">Make a plan.</div> 
     <div class="footytextelement">Get medications.</div> 
     <div class="footytextelement">Quit.</div> 
     <a href="@Url.Action("Contact", "Home")"><div class="footytextelement joinnow">Join Now!</div></a> 
    </div> 
</div>

Quelle

2017-06-01 M. Straw

.footy { 
 
    background-color:red; 
 
    background-position-x: right; 
 
    min-height: 338px; 
 
    position: relative; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.footytext { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    margin: 13px; 
 
} 
 

 
.footytextelement { 
 
    color: white; 
 
    font-size: 18pt; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
} 
 

 
.joinnow { 
 
    border: 3px solid white; 
 
    border-radius: 12px; 
 
    font-style: italic; 
 
    margin: 10px; 
 
} 
 

 

 
.footytext a:hover { 
 
    text-decoration: none; 
 
} 
 

 

 
@media (max-width: 1279px) { 
 

 
/*FOOTER APPEARANCE MOBILE*/ 
 
    .footy { 
 
     background-color:green; 
 
     background-position-x: right; 
 
     background-position-y:bottom; 
 
     height: 338px; 
 
     position: relative; 
 
     left: 0; 
 
     bottom: 0; 
 
     width: 100%; 
 
     overflow: hidden; 
 
    } 
 

 
.footytext { 
 
    position: center; 
 
    bottom: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    margin: 13px; 
 
} 
 

 
.footytextelement { 
 
    color: white; 
 
    font-size: 18pt; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
} 
 

 
.joinnow { 
 
    border: 3px solid white; 
 
    border-radius: 12px; 
 
    font-style: italic; 
 
    margin: 10px; 
 
} 
 

 

 
.footytext a:hover { 
 
    text-decoration: none; 
 
} 
 
}

<div class="footy"> 
 
    <div class="footytext"> 
 
     <div class="footytextelement">Make a plan.</div> 
 
     <div class="footytextelement">Get medications.</div> 
 
     <div class="footytextelement">Quit.</div> 
 
     
 
    </div> 
 
</div>

Ihre max-width in Medien Abfrage sollte 768px als Standard sein. Sie haben 1279px angegeben, was bedeutet, dass Sie unabhängig davon, ob Sie in einem mobilen Gerät oder auf einem Desktop sind, die Medienabfrage css überall anwenden wird.

Quelle

2017-06-01 19:48:04

Die Größe ist auf diese Weise absichtlich aufgrund dessen, was wir mit der Website tun. Wir haben die Medienabfrage übernommen und zeigen eine "mobile freundliche" Version der Fußzeile/Website, wenn sie unter 1280 Pixel breit wird. –

Ich habe meine Antwort hier bearbeitet, wie Sie sehen können, wenn Sie 1279px überschreiten, ändert es die Farbe grün zu rot. Oder du versuchst, @media nur Bildschirm und (max-width: 1279px) hinzuzufügen, hoffe, es wird für Sie arbeiten. –

Das funktioniert jetzt großartig. Allerdings kann ich den Text scheinbar nicht zentrieren, sobald er auf die richtige Größe schrumpft. Es will nur so bleiben. –

Mit dem Zustand dieses Mediums sagen Sie: Wenden Sie diese Stile über 1279px an. Verwenden Sie min-width und max-width, um mehr Kontrolle zu erhalten.

example: 
@media (max-width: 719px) {...} 
@media (max-width: 1023px) {...}

Weitere Informationen: MDN LINK

Quelle

2017-06-01 19:50:05

Das ist der Plan. Die Medienabfrage sollte wirksam werden, wenn die Website weniger als 1280 Pixel breit ist. Im Moment möchte nichts aus der Medienabfrage wirksam werden, wenn es 1279px und darunter erreicht. –

Ich habe Ihren Code ausprobiert und es funktioniert, welchen Browser benutzen Sie? –

Media Query überschreibt den ursprünglichen Stil nicht

Antwort

Verwandte Themen