Geek Answers Handbook

CSS media queries and!

I have a site that uses @media requests, but it does not seem to install them. They always keep the default style.

For example:

#div1 { background:red} @media screen and (max-height:912px) { #div1{background:blue} }

will always stick to the background: red if I don't use !important , but in my media queries I create so many selectors. Does every style of the !important selector need to be set?

+7
source share
6 answers

Change max-height to min-height: http://jsfiddle.net/jnQYb/

+2
source

I had the same problem. I realized that media queries should be at the end of the stylesheets (even if you use / import multiple files into a workflow).

+4
source

This works great for me.

Take a look at this: http://jsfiddle.net/TUL6h/1/ - the background is red, but when you change the height of a part of the result, it changes to a blue dot.

Which browser are you using?

+2
source

Not necessarily ! important is used to override the default css value to override the attributes used in the default style. So, if there is a new attribute in media queries, you do not need to use it with this.

0
source

Using the important inside the code contained in your @media requests is an effective way to add dynamic style properties to your page elements, leaving css intact by default for ease of maintenance.

Example:

 <html> <head> <style> @media all and (max-width: 768px) { /* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets) */ #semantically-named-element p { width: 60% !important; background: rgba(0,0,255,1)!important; margin: auto !important; } #semantically-named-element span { display: none !important; } } /* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */ /* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */ #semantically-named-element p { width: 90%; background: rgba(255,0,0,1); margin: auto; } #semantically-named-element span { display: block; background: rgba(0,0,0,0.8); color: #FFF; text-align: center;} @media all and (min-width: 968px) { /* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */ #semantically-named-element p { width: 80% !important; background: rgba(0,255,0,1)!important; margin: auto !important; } #semantically-named-element span { display: block !important; background: rgba(0,0,0,0.8)!important; color: #FFF !important; font-size: 200%; } } </style> </head> <body> <div id="semantically-named-element"> <p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p> </div> </body> </html>
0
source

Looking at your example in //jsfiddle.net/TUL6h/55/: You need to reorder the media queries. max height: 510px; includes max height: 500px; it must be the first so that a more special case of 500px is displayed at all.

0
source

More articles:


All Articles