I am using media query. I have device having width 360, height:640. Actually I add border to check the css applied or not when orientation change.
But it only show border red when I change the orientation. It is not showing other border why?
#media screen and (max-width: 360px), screen and (max-height: 640px)and (orientation: portrait) {
.subcontent_h {
height: 200px;
overflow: auto;
margin-top: 10px;
border: 1px solid deeppink !important;
}
}
#media screen and (max-width: 640px) , screen and (max-height: 360px)and (orientation: landscape) {
.subcontent_h {
height: 200px;
overflow: auto;
margin-top: 10px;
border: 1px solid red !important;
}
}
Order of Specification: As a last resort, when all other conflict
resolution specifications cannot determine which style should take
precedence, the last style specified will be the style used.
.subcontent_h{
height: 200px;
overflow: auto;
margin-top: 10px;
}
#media screen and (max-width: 640px) , screen and (max-height: 360px)and (orientation: landscape) {
.subcontent_h {
border: 1px solid red;
}
}
#media screen and (max-width: 360px), screen and (max-height: 640px)and (orientation: portrait) {
.subcontent_h {
border: 1px solid black;
}
}
DEMO
#media screen and (max-width: 360px), (min-device-width: 360px) and (max-device-width: 640px) and (orientation : portrait) {
/* CSS */
}
#media screen and (min-width: 360px) and (max-width:640px), (min-device-width: 360px) and
(max-device-width: 640px) and (orientation : landscape) {
/* CSS */
}
First Use Modernizer to check weather your device support media queries
Make sure you have added below meta tag in head section
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
Try Below way
#media screen and (max-width: 360px) and (max-height: 640px)
{
.subcontent_h {
height: 200px;
overflow: auto;
margin-top: 10px;
border: 1px solid deeppink !important;
}
}
#media screen and (max-width: 640px) and (max-height: 320px)
{
.subcontent_h {
height: 200px;
overflow: auto;
margin-top: 10px;
border: 1px solid red!important;
}
}
Related
I have 3 open intervals of screen width now. They are (0,600], (600,800) and [800,1000] and each has a diffferent css style. For example:
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
But how should I express (600,800) with ccs media query ?
#media screen and (max-width: 600px) {
background: #000
}
#media screen and (min-width: 800px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 600px) and (max-width: 800px){
background: #fff
}
You can use 3rd media query.
Start with a default value, which is the value of the mobile first. Then modify the values from a minimum with and up:
HTML:
CSS:
.bg {
width: 100vw;
height: 100vh;
background-color: #000;
}
#media screen and (min-width: 600px){
.bg {
background-color: steelblue
}
}
#media screen and (min-width: 800px){
.bg {
background-color: tomato
}
}
#media screen and (min-width: 1000px){
.bg {
background-color: #2c3e50;
}
}
#media (max-width: 1000px) {
background: #eee;
}
#media (max-width: 800px) {
background: #fff;
}
#media (max-width: 600px) {
background: #000;
}
This order will execute based on screen size and CSS will be applied accordingly.
You can define these interval for media queries link below:
#media screen and (min-width: 801px) and (max-width: 1000px){
background: #eee
}
#media screen and (min-width: 601px) and (max-width:800px){
background: #cccccc
}
#media screen and (max-width: 600px) {
background: #000
}
Now
The first media query will work from 0px to 600px
The second one will work 601px from to 800px
And the Third one will work from 801px to 1000px
My goal is to resolve site-content overlapping the background slider (Plugin) in WordPress. Below the media queries are conflicting between device. If it works on Mobile devices then it creates an issue on ipads or any landscape mode.
Here is my CSS media queries.
/*------ MEDIA QUERIES------ */
/* Iphone 6,7 Portrait */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -970px !important;
}
.nivoSlider {
top: 40px;
/* position:absolute; */
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
/* .site-content {
margin-top:-320px
} */
}
/* Iphone 6,7 Landscape */
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.HomePageBody {
margin-top: -110px !important;
}
.nivoSlider {
top: 40px;
/* position:absolute; */
min-height: 500px !important;
width: 100%;
overflow: hidden;
}
.site-content {
margin-top: -320px !important;
}
}
Since min/max-device-width has deprecated, you can use the orientation queries for portrait and landscape.
So your code will be like that:
#media (orientation: landscape) {
...
}
#media (orientation: portrait) {
...
}
I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.
The content does not display properly. IS there anything wrong with the below #media query?
#media screen and (max-width:) and (orientation: portrait){
body{
background-color:;
}
h1 {
display:block;
}
h1 a{
font-size:2em;
display: block;
height: number;
}
}
For example there is no max-width and background-color values?
Also there is a number instead of value for height property
// add value or remove the rule, example:
// #media screen and (max-width: 1024px) and (orientation: portrait){
// #media screen and (orientation: portrait){
#media screen and (max-width: 1024px) and (orientation: portrait) {
body{
background-color: black;
}
h1 {
display:block;
}
h1 a{
font-size: 2em;
display: block;
height: 400px;
}
}
I've read several of the questions on here as well as Google looking for stuff and I found a lot bu tfor some reason I can't get mine to work for iPads. I was able to get it working for iPhones but the iPad is still displaying my bg img. These are all the queries I've tried and came up empty handed.
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
#media only screen and (min-width: 481px) and (max-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
#media handheld and (max-device-width: 480px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
May you have Meta in you html head. like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
with that media query
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}