Ankit Seth Ankit Seth - 1 month ago 24
CSS Question

CSS media query (@media function)

I have a wordpress site. I am facing issues with custom media css code. When I try to save the code it vanishes and doesn't reflect on the site. Any help would be greatly appreciated. Following is the code I am trying to add:

@media only screen and (max-width: 719px)
.site-title {
display: none;
}

@media only screen and (max-width: 719px)
#nav-header.nav-container {
background-image: URL(http://i2.wp.com/vedsutra.com/wp-content/uploads/2016/07/cropped-VedSutra_logo.png);
background-repeat: no-repeat;
background-position: center;
}

Answer

You should wrap your query in {} like the following example:

@media only screen and (max-width: 719px) {

    .site-title {
        display: none;
    }

    #nav-header.nav-container {
        background-image: URL(http://i2.wp.com/vedsutra.com/wp-content/uploads/2016/07/cropped-VedSutra_logo.png);
        background-repeat: no-repeat;
        background-position: center;
    }
}