css - Making @media queries more specific and more focused -


Hello: I'm trying to change my CSS (WordPress) on different devices (responsive). I am using media queries in my child theme css file. But I know that my inquiries for the iPad and the iPhone are "overlapping".

Here I am using the iPad:

  @ Media only screen and (minimum-device-width: 768px) and (max-device-width: 1024px) and (Orientation: Portrait)  

And here's what I am using for the iPhone:

  @ Media only screen and (min -Device-width: 320px) and (max-device-width: 480px)  

I've found that on my iPhone - it's using both of both questions too And of the styles ...

I also have a plugin that is called "mobile" which allows me to use "is_mobile" and "is_tablet" etc. which are very useful ...

So what am I trying to do is to ensure that my CSS applies only to mobile phones, or only to one tablet, and it seems that these media Inquiries are not reliable as I thought ...

Mobile The plugin works well to separate them; But if I make a statement in the "style.css" file then I can not use PHP

So here are my questions:

  1. write two @ media queries Is there a better way because they work more clearly on devices that I want?

Thanks a lot ...

Based on the CSS I hope to use it for the purpose that it helps.

  @ Media only screen and (max-width: 768px) {body {margin: 0 pixels; } #wrapper {min-width: 0px; Width: Auto; } # Content {margin-left: 0 pixels; } # Nav {float: none; Width: Auto; Padding: 0 pixels; } #nav ul {text-align: center; } # Nav li {display: inline; Padding-top: 0 pixels; Padding-down: 0 pixels; Padding-left: 0.75em; Padding-right: 0.75em; } Footer {margin-left: 0; }} @ Media only screen and (max-width: 480 pix) {body {margin: 0 pixels; } Labels {float: none; Align text: left; } #wap {width: auto; Minimum width: 0; Margin: 0; #content {padding-top: 0.1em; Padding-down: 0.1 AM; Padding-right: 1am; Padding-left: 1am; } H1 {margin: 0; Font size: 1.5em; Padding-left: 0.3 AM; } #nav ul {padding: 0px; } # Nav li {display: block; Margin: 0 px; Border-style: solid; Border width: 2px; Border color: # 330000; } #nav {display: block; } # Content img {float: none; Padding: 0 pixels; Margin: 0.1 AM; } #mobile {display: inline; } #desktop {display: none; }}  

Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -