My media queries are working in Firefox and Chrome but not Safari.
#media screen (-webkit-min-device-pixel-ratio: 1),
and (min-device-width: 1000px),
and (max-device-width: 1600px),
and (min-resolution: 192dpi) { }
They were working absolutely fine in safari until I added in some extra code to support Firefox.
I also have
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
in my HTML so it's not this.
Please help!!
Your operation:
#media screen (-webkit-min-device-pixel-ratio: 1),
and (min-device-width: 1000px),
and (max-device-width: 1600px),
and (min-resolution: 192dpi) { }
reads:
or and (min-device-width: 1000px)
or and (max-device-width: 1600px)
or and and (min-resolution: 192dpi)
By documentation:
comma-separated lists
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.
Either check that this is the intended behavior, or separate the logical operations and and or from each other...
Firefox/Chrome have better implementations on rules, and can thus "fix" common logical fallacies in them.
I have solved it, I have separated the media query into two so that it is
#media screen and (-webkit-min-device-pixel-ratio: 1),
and (min-device-width: 1000px),
and (max-device-width: 1600px) { }
and then
#media screen and (min-resolution: 192dpi) { }
this has solved the issue
// For safari version 15.4 only
#media screen and (-webkit-min-device-pixel-ratio: 1),
and (min-device-width: 1000px),
and (max-device-width: 1600px) {
.search-field .top-search .form-group input[type='search'] {
height: 44px !important;
}
.dropdown{ padding: 2px 20px; }
.nice-select{height: 44px;}
}
#media screen and (min-resolution: 192dpi) {
body{line-height: 26px!important;}
.search-field .top-search .form-group input[type='search'] {
height: 44px !important;
}
.dropdown{ padding: 2px 20px; }
.nice-select{height: 44px;}
}
For Example :
#media not all and (min-resolution:.001dpcm)
{ #supports (-webkit-appearance:none) and (stroke-color:transparent) {
//add ur media queries.
//Queries inside this will work only for safari
}
Related
This is my current code:
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 750px)">
Is there an option to have a min AND a max query?
I tried media="screen and (min-width: 250px), screen and (max-width: 750px)"
but it didn't work.
Is there a solution for this?
I think you need this way
Make a file for styles route and import other the style file in the #media for any size
example :
#media only screen and (max-width: 750px) {
#import "./example.css";
}
In style.css there should be a query like this.
Example: on screens that are 600px or less, set the background color to olive
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
You can use simply like this.
#media only screen and (min-device-width: 767px) and (max-device-width: 1024px) {
/* your code here */
}
i have done the website it is working fine in all the mobile devices but in Iphone5 the font size not accepting. it is bigger and bolded than what i have give in css code. below the code i have given for common
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
so i want any specific code do i need to add for IPHONE 5. thanks
In order to target mobile devices, you will need to make sure you have the following in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And then add the mobile media query in your stylesheet:
#media (max-width:767px) {
/* Add mobile specific styles here */
}
I know in your question you want to target only an iphone5, however it is a good idea to add one media query to target all mobile devices and you won't have any issues and can add styles for mobile only within said media query.
Edited Answer
/* iPhone 4/5 portrait mode */
#media (max-width:320px) {
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
}
/* iPhone 4/5 landscape mode */
#media (min-width: 321px) and (max-width: 480px) {
*/ Styles go in here */
}
Add this medai query for iPhone 5 only
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
I'm not sure if it is the best way to do this, but you can set styles in js/jQuery when detecting iphone.
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
/*set some style here*/
}
});
Also, if your text is too big on iphone, you can try:
-webkit-text-size-adjust: 90%;
Anyway, Helvetica Nue is not standard font, so if you won't use external fonts import, they can look diffrent on some devices.
Help! I created a Heroku app and my CSS3 #media queries aren't working on mobile devices(checked phone and tablets already). Weirdly, they only work on web browsers(I've checked by resizing pages in chrome and firefox).
I've already included the viewport meta tag in my html document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >
And here's a portion of my #media query syntax:
#media only screen and (max-device-width: 361px) {
.realstff-wrapper {
height: 88vh;
}
#gall-box {
display: none;
}
#img-caption {
float:right;
right: 0em;
height: 20px;
width: 200px;
}
#img-block {
height: 100vh;
overflow: hidden;
}
}
I've tried changing #media syntax to these styles, but none of them seem to do the trick:
#media (max-width: 843px){ }
#media (max-device-width: 843px){ }
#media (max-width: 843px) and (max-device-width: 843px) { }
#media screen (max-device-width: 843px){ }
#media screen and (max-device-width: 843px){ }
#media only screen and (max-device-width: 843px){ }
#media only screen and (max-device-width: 843px), (max-width: 843px) { }
#media only screen and (max-device-width: 843px), only screen and (max-width: 843px) { }
I really can't figure out why it's acting out on me :( Kudos for whoever can help solve this problem.
Solved my own problem. The #media syntax I originally used actually worked in conjunction with view metatag.
Turns out I just wasn't "git commiting" my changes correctly through command line.
Embarassing..heh...
I can't figure out the issue. I searched a lot and after that. I am here for help so guys please help me. Below is the HTML I use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
and these are the media queries
#media all and (max-width: 1400px) { }
#media all and (max-width: 1024px) { }
#media only screen and (max-width: 768px) { }
#media only screen and (max-width: 480px) { }
#media only screen and (max-width: 320px) { }
Help me identify what is wrong.
#media all and (min-width: 1400px) {
}
#media all and (max-width: 1399px) and (min-width: 1024px) {
}
#media all and (max-width: 1023px) and (min-width: 768px) {
}
#media all and (max-width: 767px) and (min-width: 480px) {
}
#media all and (max-width: 479px) and (min-width: 320px) {
}
#media all and (max-width: 319px) {
}
This in <head></head>
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
I try to put some more information here, gathered from web.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
If you have not defined css properties for different medias, how do you expect the browser to render it?
You need to for example:
#media only screen and (max-width: 480px) {
#header
{
width:100%
background:red;
}
}
I am new to responsive design and i didn't get it properly till now. My question is that i need to write two media queries for 480*800 and 480*856 device for both landscape and portrait mode. Please explain it to me how it works ?
I have tried this query and it seems working for both the devices in landscape mode
#media only screen and (min-width:480px) and (max-width:854px) and (orientation:landscape)
#media all and (max-width: 480px) and (min-width: 480px) and (min-height:800px) and (max-height:856px)
{
body {
background-color:lime;
}
}
This would target both devices with the same css code.
Alternatively you could split it into two media queries and target each platform.
When I was new to responsive design I found this article very useful: http://css-tricks.com/css-media-queries/
You can try the following css styles:
media screen (max-width: 480px) and (max-height:856px) {
//code
}
media screen (max-width: 480px) and (max-height:800px) {
//code
}
media screen and (max-width: 856px) {
//code
}
media screen and (max-width: 800px){
//code
}