Media query iPad mini

lilly_runs · April 2016

Hi there,

I have a problem with the media query for an iPad mini. I have red that for the iPad mini I have to use:

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 1) { }

I added the code under the Custom CSS field of the theme options.

But apparently it does not read the css at all.

I will be glad if you could help me.
All the best,
Kosio

P.S. The website is http://jaguarrescue.foundation/

Albert · April 2016

Hi,

we have no idea where from you get above css but it's wrong. The right @media rule should be:

@media only screen and (min-width: 768px) and (max-width: 1024px) { /*content*/ }

More details about @media rules, you can read on http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Thanks!

lilly_runs · April 2016

Still does not work. I have tried many different Media queries variations I have saw, still does not do anything.

MY code now is:

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

#Top_bar .menu > li > a span:not(.description){line-height:50px; padding:0 10px;}

#Top_bar .menu > li > a{padding: 5px 0;}

#Top_bar .menu > li > a{line-height: 30px !important;}

#Top_bar .menu > li {float:right !important;}

#Top_bar .menu_wrapper{float:right !important;}

.header-classic #Top_bar{position:relative;}

}

What's wrong with it?

Albert · April 2016

Maybe you have errors in custom css section and that's why any css below does not work? Did you tried to use this css on 1st position (before any other css)?

lilly_runs · April 2016

Silly me.
Everything seems to work fine now! Thanks

Albert · April 2016

You're welcome!

Media query iPad mini

Comments