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
I am trying to make my website responsive. However, when I use another media query, a lot of things won't work. For example:
(Normal CSS)
div#divName
{
font-size:1em;
}
(Media query code)
#media screen and (max-width: 320px)
{
div#divName
{
font-size:.5em;
}
}
This doesn't work. It only works when I use "!important" behind it. But I don't know if that is correct or "wrong". Could anyone tell me how I can fix this?
All !important does is increase specificity. To avoid using !important, all you need to do is increase specificity.
In your case, both of your selectors have identical specificity. The issue is most likely caused by your media query being placed before your "Normal CSS", and thus getting overridden.
If they're in the same CSS file, ensure your "Normal CSS" is placed before your media query.
If they're in different CSS files, ensure the file containing your media query is included in your HTML document after your "Normal CSS".
make sure your CSS rules that you want to override loads after.
in your case
div#divName
{
font-size:1em;
}
should be loaded first and after that:
#media screen and (max-width: 320px)
{
div#divName
{
font-size:.5em;
}
}
you want to have two separated files style.css and responsive.css and include them in following order:
<link href="style.css" rel="stylesheet" />
<link href="responsive.css" rel="stylesheet" />
It seems like there should really be an easy solution to this, but so far I've been unsuccessful in finding one.
I'm using Zurb Foundation and I'm basically creating a live form that takes inputs from a form (above), and fills in a content (below) using angular.js. Users will then print the page to a PDF. I'd like to maintain the layout I have for the content below, and I'd like to hide the form above when printing. Zurb has a fine "hide-for-print" css rule that seems like it should work just fine when applied to the form above, but when I toggle print stylesheets, it basically strips all CSS and goes back to ugly.
Suggestions?
What I have done in these type situations is use a separate file for the print.css.
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
If the browser is printing, the global.css file will be loaded first and than the print.css file will overwrite anything aftewards.
Keep in mind though, that all background: * rules will be turned off in all browsers by default when printing, so some styles are going to be compromised regardless.
Have you tried using CSS media queries for print media?
.foo {
height:150px;
width:150px;
background-color:#F00 // see what I did there?
}
.bar {
height:10px;
width:50%;
border-radius:5px;
background-color:#000
}
.baz {
width:100px;
height:150px;
background-color:#FFF;
}
#media screen {
.baz {
display:block;
}
}
#media print {
.baz {
display:none;
}
}
Now, only some of .baz's properties are targeted by the media queries. You can feel free to put in any of .baz's properties inside or outside of the queries themselves. Likewise, you can put all of .baz's properties in the media query, but I gather that's not what you're looking for.
idk about zurb's print style sheets, and without an example, it's pretty hard to answer, but you can use weasyprint, open source library to convert html/css to pdf https://github.com/Kozea/WeasyPrint
I have a few divs with text that have display:none set. While on the screen I have a functionality that changes it to display:block when I click other elements.
<div class="hiddenText" style="display:none">My hidden text</div>
I need to print the page and show all text. I added css file for print and specified display for hidden text
#media print {
.hiddenText {
display: block
}
}
All styles for printed version of the document work great, except this. What is the best way to make it printable?
Your inline styles have precedence over the rules specified elsewhere. To override inline styles you can use the !important keyword to force the rule.
Something like this will probably do the trick:
#media print {
.hiddenText {
display: block !important;
}
}
Even though !important has nothing to do with CSS specificity, MDN has a section in its article on the topic that discuss !important.
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity.
Instead of #media print try putting your print styles in something like this, <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css">
I want to make a css rule, which affects all but the opera browser, all the other browser add a css rule:
#content{left:1px;}, (opera without this rule). the below code not worked...
<!--[if !OPERA]>
<style type="text/css">
#content{left:1px;}
</style>
<![endif]-->
Conditional comments are recognized by IE only. If you need Opera-specific CSS, you will need JavaScript:
if (window.opera) {
document.getElementById('foo').style.height = '100px';
}
you can use the property you want for a selector like #content{left:1px;} then add a css hack for opera providing the default value (or the value you want). The css hack has the following syntax: #media all and (min-width:0px) {head~body .selector {property:value;}} an example of the previous syntax and your example could be: #media all and (min-width:0px) {head~body #content {left:0px;}}