CODEWITHSUNDEEP
cssmedia-queries
Stephen Fergie Ferguson
Stephen Fergie Ferguson

Reputation: 11

@media query not working in browser

Currently putting together a website that is using media queries. All major browsers don't seem to show the media query working but when i used jsfiddle it does exactly what i want it to do.

Heres the Jsfiddle link https://jsfiddle.net/asna03zq/

Here's a quick view of the media code

    @media only screen and (min-width: 768px) {
body {
display:block;
}
#header {
    padding: 0px;
    margin: 0px;
    background-image: url(https://www.pendle.gov.uk/images/stage_2_symbol_3.png), 
    url(https://www.pendle.gov.uk/images/aviva_friends_life_logo_1.png);
    background-position: right top, left top;
    background-repeat: no-repeat;
background-size: 164px 120px, 200px 90px;
    width: 100%;
}
#footer {
    background-image: url(https://www.pendle.gov.uk/images/Ribble_valley_logo.png), 
    url(https://www.pendle.gov.uk/images/Pendle_logo.png);
    background-position: 1% 95%, 98% 95%;
    clear: both;
    background-repeat: no-repeat;
    padding: 5px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background-color: #FFF;
}
#header h1 a:link, #header h1 a:active, #header h1 a:visited, #header h1 a:hover {
    float: right;
    color: #FFF;
    font-size: 0.6em;
}
#header h1 a {
    float: right;
 color: #FFF;
 margin: 65px 125px 0 0;
 font-size: 0.6em;
}}

Can anyone shed any light on what i'm clearly doing wrong here?

Thanks

Upvotes: 1

Views: 114

Answers (4)

Dima
Dima

Reputation: 287

Try to change from :

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

to:

@media (min-width: 768px)  {

it should make it work

Upvotes: 0

kaushik dey
kaushik dey

Reputation: 102

Try:
<meta name="viewport" content="width=device-width, initial-scale=1">

and check all the brackets are closed or not.

Upvotes: 0

Thibaud Lacan
Thibaud Lacan

Reputation: 356

The CSS looks good, it might come from your HTML Can we see your HTML header please? Make sure to use

<!DOCTYPE html>

and as well, a good practice for responsive websites (mobile version) is to use the meta viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 0

stanze
stanze

Reputation: 2480

Include this meta tag in your head section.

<meta name="viewport" content="width=device-width">

Upvotes: 2

Related Questions