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;
}
}
Related
Only the second #media tag is applied to my css, and when using chrome dev tools the it only shows the second one in the css tag.
#media screen
and (max-device-width: 600px)
and (min-device-width: 0px)
{
#navLink {
font-size: 1.6em;
}
}
#media screen
and (max-device-width: 2000px)
and (min-device-width: 600px)
{
#navLink {
font-size: 35px;
}
}
I want to make one part of the page responsive. But I cant get it working.
Only the media query with 1920px works.
this is my code:
#media screen and (max-width: 1440px) and (min-width: 1350px) {
#designer-info {
margin-right: -129px;
}
}
#media screen and (max-width: 1920px) and (min-width: 1700px) {
#designer-info{
margin-right:-8%;
}
}
#media screen and (max-width: 2880px) and (min-width: 1920px) {
#designer-info {
margin-right: -430px;
}
}
Could somebody help me. i cant find the solution.
Not working because you have in one query min-width:1920px and in another query max-width:1920px, so it will override.
don't need to use both max-width and min-width
either use mobile first approach using min-width
#media (min-width: 1350px) {
#designer-info {
margin-right: -129px;
}
}
#media (min-width: 1700px) {
#designer-info {
margin-right: -8%;
}
}
#media (min-width: 1920px) {
#designer-info {
margin-right: -430px;
}
}
or non-mobile approach using max-width
#media (max-width: 2880px) {
#designer-info {
margin-right: -430px;
}
#media (max-width: 1920px) {
#designer-info {
margin-right: -8%;
}
}
#media (max-width: 1440px) {
#designer-info {
margin-right: -129px;
}
}
}
Need to add <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML head section.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
<body>
...
</body>
</html>
maybe override there (max-width: 1920px) and (min-width: 1920px)
You should to use the different width in each media query.
Hope this can help you
Ex.
(max-width: 1920px) and (min-width: 1700px)
and
(max-width: 1921px) and (min-width: 2880px)
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.
currently working on a temp page for a restaurant as seen at: mattt.co/ok-rm/iddu. I've set up a number of #media breakpoints for large-to-small desktop screens as well as for mobile.
The queries seem to work fine, however, one specific query is not functioning properly, and that is the '.footer1 a, footer2 a' styles in the iPhone landscape view — query as follows:
#media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape)
As it stands, when viewed in landscape mode the site displays as follows on the iPhone: Image.
This is an error, as the scale of the footer text (phone no., e-mail, etc.) should be displayed as follows (seen through Chrome's iPhone emulator): Image.
I'm not sure why all other elements seem to be scaling correctly at their respective breakpoints, but the ".footer1 a", and ".footer2 a" styles are not appearing as intended specifically on the landscape view for the iPhone.
I've attached the relevant code below.
<meta name="viewport" content="width=device-width, initial-scale=1" />
.footer1 a, .footer2 a {
font-family: pitch;
display: block;
font-size: 30px;
line-height: 40px;
letter-spacing: 1px;
}
#media only screen and (min-width: 1400px) and (max-width: 1599px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 25px;
line-height: 35px;
}
}
#media only screen and (min-width: 1201px) and (max-width: 1399px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 20px;
line-height: 30px;
}
}
#media only screen and (min-width: 1025px) and (max-width: 1200px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 20px;
line-height: 30px;
}
}
#media only screen and (max-width: 1024px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 15px;
line-height: 20px;
}
}
#media only screen and (min-width : 569px) and (max-width: 1024px) and (orientation: portrait) {
.footer1 a, .footer2 a {
font-size: 28px;
line-height: 36px;
}
}
#media only screen and (min-device-width : 569px) and (max-device-width: 1024px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 20px;
line-height: 30px;
}
}
#media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: portrait) {
.footer1 a, .footer2 a {
font-size: 15px;
line-height: 20px;
}
}
#media only screen and (min-width : 320px) and (max-width: 736px) and (orientation: landscape) {
.footer1 a, .footer2 a {
font-size: 15px;
line-height: 20px;
}
}
If anyone could take a look that would be greatly appreciated! I can't figure out where I've gone wrong, even when using Safari's iPhone developer tool to inspect element, the listed style is turning up correctly.
Many Thanks!
You probably need to add html {-webkit-text-size-adjust:100%;} to stop iOS from automatically scaling up fonts it thinks are too small.
Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
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;
}
}