M. Straw
M. Straw

Reputation: 502

Media Query Won't Override Original Style

I have a media query to change the look of a footer when the site goes mobile, but, for some reason, it doesn't seem to want to take the media query styles over the original base style. The specific CSS code is as follows

.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;
}
}

The HTML being manipulated is:

<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>

Upvotes: 0

Views: 273

Answers (2)

Pawan Kumar
Pawan Kumar

Reputation: 1374

  .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>

Your max-width in media query should be 768px as standard. You have given 1279px which means no matter whether you are in mobile device or desktop, media query css will apply everywhere.

Upvotes: 1

Lucas David Ferrero
Lucas David Ferrero

Reputation: 1912

With that media's condition you are saying: apply these styles above 1279px. Use min-width and max-width to get more control.

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

More information: MDN LINK

Upvotes: 0

Related Questions