In the styles.css, I am using media queries, both of which use a variation of:
/*--[ Normal CSS styles ]----------------------------------*/
#media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.
Can anyone point me in the right direction?
All three of these were helpful tips, but it looks like I needed to add a meta tag:
<meta content="width=device-width, initial-scale=1" name="viewport" />
Now it seems to work in both Android (2.2) and iPhone all right...
Don't forget to have the standard css declarations above the media query or the query won't work either.
.edcar_letter{
font-size:180px;
}
#media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
I suspect the keyword only may be the issue here. I have no issues using media queries like this:
#media screen and (max-width: 480px) { }
i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css
here is an example :
<meta name="viewport" content="width=device-width" />
<style>
#media screen and (max-width:900px) {}
#media screen and (min-width:900px) and (max-width:1200px) {}
#media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
css Link line as simple as above line.
Including a meta tag like below can cause the browser to handle the viewport zooming differently.
<meta content="width=device-width, initial-scale=1" name="viewport" />
Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing.
Proper media query should look like this:
#media screen and (max-width: 1024px) {}
The sequential order of css code also matters, for example:
#media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}
the above code will not work because of the execution order. Need to write as following：
.example-text{
color:blue;
}
#media(max-width:600px){
.example-text{
color:red;
}
}
Always mention max-width and min-width in some unit like px or rem. This figured it out for me. If I write it without the unit and only the number value, browser can't read the media queries. example:
this is wrong
#media only screen and (max-width:950)
and
this is right
#media only screen and (max-width:950px)
The OP's code snippet clearly uses the correct comment markup but CSS can break in a progressive way — so, if there's a syntax error, everything after that is likely to fail. A couple times I've relied on trustworthy sources that supplied incorrect comment markup that broke my style sheet. Since the OP provided just a small section of their code, I'd suggest the following:
Make sure all of your CSS comments use this markup /* ... */ -- which is the correct comment markup for css according to MDN
Validate your css with a linter or a secure online validator. Here's one by W3
More info:
I went to check the latest recommended media query breakpoints from bootstrap 4 and ended up copying the boiler plate straight from their docs. Almost every code block was labeled with javascript-style comments //, which broke my code — and gave me only cryptic compile errors with which to troubleshoot, which went over my head at the time and caused me sadness.
IntelliJ text editor allowed me to comment out specific lines of css in a LESS file using the ctrl+/ hotkey which was great except it inserts // by default on unrecognized file types. It isn't freeware and less is fairly mainstream so I trusted it and went with it. That broke my code. There's a preference menu for teaching it the correct comment markup for each filetype.
I encountered this issue recently too, and I later found out it was because I didn't put a space between and and (.
This was the error
#media screen and(max-width:768px){
}
Then I changed it to this to correct it
#media screen and (max-width:768px){
}
It may also happen if the browser zoom level is not correct. Your browser window zoom should be 100%. In Chrome use Ctrl + 0 to reset the zoom level.
Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.
#media screen and (max-device-width: var(--breakpoint-small)) {}
CSS variables don't work in media queries (by design).
Weird reason I've never seen before: If you're using a "parent > child" selector outside of the media query (in Firefox 69) it could break the media query. I'm not sure why this happens, but for my scenario this did not work...
#media whatever {
#child { display: none; }
}
But adding the parent to match some other CSS further up the page, this works...
#parent > #child { display: none; }
Seems like specifying the parent should not matter, since an id is very specific and there should be no ambiguity. Maybe it's a bug in Firefox?
Add Below tag in html's head section
<meta content="width=device-width, initial-scale=1" name="viewport" />
I use a few methods depending.
In the same stylesheet i use: #media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.
#media all and (max-width:320px)and(min-width:0px) {
#container {
width: 100%;
}
sty {
height: 50%;
width: 100%;
text-align: center;
margin: 0;
}
}
.username {
margin-bottom: 20px;
margin-top: 10px;
}
due to only not typo mistake not work for me
#media screen and(max-width: 930px) require sopace between the (and) & opening bracket #media screen and (max-width: 930px)
The Only Fix You All Need Is :
Just Take All The Media Queries At The End Of A .CSS File
It Works, Try It
It is important that the #media screen must be at the end of the css
For me I had indicated max-height instead of max-width.
If that is you, go change it !
#media screen and (max-width: 350px) { // Not max-height
.letter{
font-size:20px;
}
}
For everyone having the same issue, make sure you actually wrote "120px" instead of only "120". This was my mistake and it drove me crazy.
Well, in my case, the px after the width value was missing ... Interestingly, the W3C validator did not even notice this error, just silently ignored the definition.
I was having this same problem and it turns out my media queries were in the wrong order. They should be defined from widest to smallest in the CSS
Can't say is it a real problem or I'm just being paranoid but this behavior of media queries is really driving me crazy for last couple of hours.
Let's consider this really simple CSS.
body {background:yellow}
#media (max-width:399px) {
body {background:red}
}
#media (min-width:400px) {
body {background:blue}
}
Problem happens when width is 399.333px! (or any float-value between 399 and 400 integers)
My logic says that by using this CSS style page will never turn yellow, right? It should be red when viewport size is shorter than 400px in width and blue when it's 400px and over.
Weird behavior happens with Opera browser (I'm using 36.0 at the moment) on Windows when page is zoomed-in. I understand that viewport width is calculated using real viewport width and current zoom-level and this value should always be integer. But...
Looks like Opera doesn't round/floor/ceil that value which affects on entire page. I'm getting yellow background when Opera finds out that viewport-width is not 399px or 400px but it's 399.333px!? So none of media queries fulfills condition.
I've already tried to find an answer here and web-wide but nothing is close enough to this problem. This problem already happened to me when I was using em units so I could work around and turn them to pixels, but I can't affect user's decision about using browser's zoom feature.
Is there something I can do to prevent this or that's just the way it is?
The easiest way to simulate this behavior is hitting CTRL,+ three times and than easily move vertical slider in Object Inspector.
update:
Yes, I can fix it with "mobile/desktop first" approach by linking each media break-point to previous one but that's not part of my question. Also, default body style is here as visual aid only and changing that really doesn't solve problem.
A simple solution could be the following:
body {background:yellow}
#media (max-width:400px) {
body {background:red}
}
#media (min-width:400px) {
body {background:blue}
}
The rules in the last media query will simply overwrite any parameters that exist previously, just because of the order.
That way there won't be a situation/width which isn't covered by these two media queries: Everything up to 399.9999... (whatever) fulfills the first condition, everything above 400 will meet the second condition, and if the width is exactly 400, the rules in the second media query will overwrite the previous ones due to their order.
Similar layout
The answer to this question should be to avoid the problem altogether, and simply leave one of the media queries out, and let one media query override the other:
body {background: red;}
#media (min-width: 400px)
{
body {background: blue;}
}
However, when you need a fundamentally different layout, this would cause a lot of additional code simply to reset one case from the other. As is the case in the following example:
.some-element {background-color: red;border-left: 30px;}
#media (max-width: 399px)
{
.some-element {border-left: none;padding-bottom: 40px;}
}
Whereas it would be shorter and more elegant to write:
.some-element {background-color: red;}
#media (min-width: 400px)
{
.some-element {border-left: 30px;}
}
#media (max-width: 399px)
{
.some-element {padding-bottom: 40px;}
}
But neither of the media-queries in the last example code will take effect if the width is for instance 399.5px. Read the next part of this answer, if you still wish to write such code with perfect coverage.
Use floating-point numbers
Unfortunately the media queries for min-width and max-width values are always inclusive. A browser uses fractional pixels when it has zooming capabilities. Therefore, a simple solution to this problem is to increment your threshold pixel value of 400px with the lowest possible fraction, for instance to 400.00001px. However, the crucial question then remains, what is the lowest possible fraction?
The CSS specification does not say anything about which data types are used to store numbers:
A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits.
But according to the answer to 'Why does Bootstrap use a 0.02px difference between screen size thresholds in its media queries?':
Indeed, cross-browser compatibility is the reason: according to Bootstrap's source, 0.02px is used "rather than 0.01px to work around a current rounding bug in Safari.
Apparently, bootstrap being a widely used framework, it seems that 0.02 would be the correct value to use in this specific case.
In your case, to get a perfect coverage of your media queries - and thereby prevent a yellow background, the solution would look like this:
body {background: yellow;}
#media (max-width:400px) {
body {background: red;}
}
#media (min-width:400.02px) {
body {background: blue;}
}
Use CSS4
As of CSS4 you may use intuitive operators for media queries such as >= and <= instead of min- and max-, and more importantly, additionally you may use exclusive operators such as > and < which immediately solves the problem (see here).
However, it may not be widely supported. Unfortunately, this feature is not yet on Can I Use to check browser support. You may check it yourself using this codepen. It seems to work in the latest version of Firefox.
The solution would then be as simple as:
body {background: yellow;}
#media (width <= 400px) {
body {background: red;}
}
#media (width > 400px) {
body {background: blue;}
}
A simple page which I've designed with bootstrap framework stops becoming responsive once the screen width is below 482px? The only thing i can spot is that it stops adjusting elements once the screen reaches the width of the form input fields plus an equal amount of padding either side, thus i suspect that the issue is somehow related to the form input field width settings, but I am unsure. Can anyone help please? I have read the documentation yet i am none the wiser regarding a solution.
Here's my bootply: http://www.bootply.com/DLxLacH4Jy#
Bootstrap has the following breakpoints
#media (max-width: 767px) {}
#media (min-width: 768px) {}
#media (min-width: 992px) {}
#media (min-width: 1200px) {}
So if you want to apply some specific styles for screens smaller then 482px
all you have to do is to write class like
#media (max-width: 482px) {
.class-to-center {
display: block;
margin-right: auto;
margin-left: auto;
}
}
The solution to the specific problem I was having in my example was that i had over complicated the form with bootstrap grid classes for screen size formats, e.g. .col-xs-4 /col-md-6 etc, this had disrupted the inline form display and in trying to override this, not quite understanding what was negating the inline display, I used a width class to set a width of the inline form, this was stopping the responsiveness below the set width of the inline form elements.
Cleaned and corrected code here; http://www.bootply.com/DLxLacH4Jy
I've taken the liberty of adding this as my own answer to the question, as it does represent the solution to the exact problem i was trying to solve, however both Yuyokk & Joe Conlin's comments above were directly relevant and helpful also, if not the precise solution to my problem.
I recently asked a question about how to use media queries while supporting fallback for older browsers that don't support them. The only answer (while it works) was to use javascript such as adapt.js to determine which stylesheet to load.
I have been tinkering around and realized an unbelieveably simple solution that worked for me in IE7 anyways, was the following:
.wrapper{width:1024px;}
#media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
#media all and (max-width: 1024px) {
.wrapper{width:1024px;}
}
#media all and (max-width: 900px){
.wrapper{width:900px;}
}
The above is just a really simple example. When I fiddling around I noticed if I specified a default value for .wrapper IE7 rendered it and ignored the media queries. In Chrome/FF/Safari it used the media queries css. This leads me to think this can be a compatible workaround to javaascript but I'm not sure of any ramifications whether browser compatibility or SEO.
Is this a bad way to implement and will it have any compatibility issues? I like the idea of having all css in one file.
Any thoughts would be appreciated, thanks!
Your ordering of max-width media queries means that by the cascade, this rule becomes totally unnecessary; you can remove it unless you intend the styles in this rule to be different than your first rule which doesn't sit in its own #media block:
#media all and (min-width: 1025px) {
.wrapper{width:1024px;}
}
Besides that, I don't see any ramifications or compatibility issues. It's pretty much how media queries with #media rules are meant to be used.
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).