Media Query Won't Override Original Style

Question

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>

Answer 1

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

Answer 2

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