CODEWITHSUNDEEP
htmlcssmedia-queriesblogspot
Alvian Casablanca
Alvian Casablanca

Reputation: 11

Media queries don't work in Blogger

I have the following media screen queries which work on local browser as xml, but it does not seem to work in blogspot:

/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}

#header-wrapper {
width:100%;
}

#navigation {
width:100%;
font-size:0.7em;
}

#content-wrapper{
width:63.8%;
float:left;
}

#sidebar-wrapper{
margin-left:0.5%;
width:34%;
float:left;
}

#footer-wrapper{
width:100%;
float:left;
}
}

/* for 700px or less */
@media screen and (max-width: 700px) {
#content-wrapper {
width: auto;
float: none;
}

#sidebar-wrapper {
width: auto;
float: none;
}
}

These work on local browser (firefox), but when I implemented them on blogger, the media queries won't work when I tried to change the width of the browser by zooming it out.

I had added the meta viewport code as well, but still not work.

<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>

Any ideas? great thanks!

*Addition:

This code also resulted broken view:

#navigation{
background-color: #5F5F5F;
margin-top: -25px;
}

#navigation ul{
margin-left:-40px;
}

#navigation ul li{
display:inline-block;
padding-right: 10px;
padding-top:10px;
padding-bottom:10px;
}

#navigation ul li:hover{
background-color:#000000;
}

#navigation ul li a{
text-decoration:none;
color:white;
font-family:calibri;
padding-left:10px;
}

Upvotes: 0

Views: 1452

Answers (2)

Alvian Casablanca
Alvian Casablanca

Reputation: 11

Looks like the problem is the comment tag . Maybe blogger doesn't support this comment writing style. Now the problem is solved since I got rid of them!

Upvotes: 0

Abdooapps
Abdooapps

Reputation: 81

Check this link : http://www.fiveforblogger.com/2012/01/fun-with-css-media-queries-in-blogger.html

<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>

...

@media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #page-wrapper
        { width: 800px; }     
    #side-wrapper
        { position: relative; float: left; top: 0px; margin-top: 20px; width: auto; }    
    ...
    ...
    }

@media only screen and (min-width: 500px) and (max-width: 767px) {
    #page-wrapper
        { width: 640px; }     
    .menu, #logo img
        { width: 100%; }
    ...
    ...
    }

Upvotes: 1

Related Questions