I have this form placed in the footer of my page (has just one text box and one button). I want to try and apply #media to it, based on the viewport width available ... So for example, in my case the full width this form needs it about 270px or so. So I want to apply CSS to say that:
if the width available is at least 270px
apply first set of CSS rules
else
apply second set of CSS rules
How can I do this using #media ?
There's no if/else syntax for #media, so you would need to repeat the same media query in two separate #media rules and use not for one of them to mean "else".
In your case, the media query would be all and (min-width: 270px). (You need to have a media type for not to work; the default is all so I'm just using that.)
Your CSS would then look like this:
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
#media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
I should add that one popular way is to make use of the cascade by having just one #media rule for overriding styles:
/* Apply second set of CSS rules */
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
However this falls short if you have any styles outside the #media rule that aren't (or cannot be) overridden inside it. Those styles would continue to apply, and you have no way of undoing them short of actually redeclaring them. Sometimes you cannot undo them by redeclaring them, and that's when you cannot use this method to apply styles. See my answer to this question for a detailed explanation.
In this example, the height: 200px declaration will always apply:
.example {
width: 200px;
height: 200px;
}
#media all and (min-width: 270px) {
.example {
width: 400px;
}
}
Of course, if that's not a problem then you can use this in order to avoid duplicating media queries. But if you're looking for a strict if/else construct, then you'll have to use not and a duplicated media query.
Yes. Typically start with your main CSS and then alter the design based on width (or media type) with additional CSS that will overwrite any previous CSS.
<style type=text/css">
/* the main css for the site */
.main-content {width:960px;}
/* the css adjustment for the site between two widths */
#media screen and (max-width:600px) and (min-width:271px) {
.main-content {width:100%;}
}
/* the css adjustment for the site with a max-width of 270px */
#media screen and (max-width:270px) {
.main-content {width:260px;}
}
</style>
This is how you would implement that scenarion
<style>
// apply second set of CSS rules
#media (min-width: 270px) {
// apply first set of CSS rules
}
</style>
In this situation the CSS rules applied beforehand would get overwritten when the media query argument is met.
Related
I have multiple media queries running, however it is only using the largest query as opposed to the one that is correct.
See codepen here:
http://codepen.io/Not_A_Fax_Machine/pen/wdyjWO
#media (max-height: 346px) {
li.sidebar-list {
max-height: 69px !important;
}
}
#media (max-height: 480px) {
li.sidebar-list {
max-height: 96px !important;
}
}
CSS media query stacking should be done from the biggest width down to the lowest width. This is what CSS stands for - cascading style sheets.
Everything on line 2 overrides everything on line 1. - think about it this way when writing CSS
Meaning, your media query order should be as follows:
#media (max-height: 480px) {
li.sidebar-list {
max-height: 96px;
}
#media (max-height: 346px) {
li.sidebar-list {
max-height: 69px;
}
}
And this way you won't need to use !important, because the confusion should be over by now.
I hope that's not a problem with largest query actually css will render top to bottom, so finally it will render last css your largest query is there at bottom so rendering last query properties you can shuffle and check.
hope my answer help you.
So I am currently building a system which allows the CSS to be stored within MariaDB (MySQL) database. I am currently going over the logic flow for this, and wondered what is preferable in terms of media queries.
So, what I really want to know is;
Should I load the media queries at the top of the CSS file or the non media query selectors at the top of the CSS file? Which one is preferable? Or is this subjective, because of how things are overwritten by code further down the page.
Thanks in advance everyone.
Actually this could be subjective, however, there is the best practice for that.
What I prefer is to keep your normal CSS selectors in one file like app.scss and keep your media-query in another file like responsive.scss while developing. so even would be better to make all modules separate. However, at the end, you need to concatenate them and the best would be to keep your normal CSS selectors first and then load Media-Query right after that.
#import 'custom/app';
#import 'custom/responsive';
The reason to follow this practice is that CSS will be read from TOP to BOTTOM, thus, you may understand that all your media query rules will be implied right after their original rules and it won't affect responsiveness.
All in all, that could be very subject and may other developers would prefer to write their CSS and media query CSS rules right after each other but that would be obvious that they most likely to code media query right after main rules. TO clarify, I will write only one sample code in my perspective:
GOOD
body {
background-color: lightblue;
}
#media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
BAD
#media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
body {
background-color: lightblue;
}
Update:
I'd like to also mention two different approaches.
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.
body { background: lightblue; }
#media (min-width: 480px) {
body { background: lightblue; }
}
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.
body { background: lightblue; }
#media (max-width: 480px) {
body { background: lightblue; }
}
It doesn't matter. For practical purposes i put the media queries after the modelled element but you could put all the queries in the top or in the bottom of the page and it would be indifferent (it won't load faster or slower). For debugging purposes i think it's better my method.
For example:
.box { max-width: auto; }
#media (min-width: 1200px) {
.box {
max-width: 10px;
}
}
Pressing F12 I can instantly change CSS of elements in Chrome. However, I can not input #media screen and (max-width) similar to here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
When I press enter it simply disappears. What can I do to dynamically add and remove media queries?
When you edit the styles for a specific element in the inspector, it is as though you were editing the element's inline style attribute: you can only place property declarations such as color: red in your example. This is even reflected in the DOM visualization itself as you edit an element's styles. Media queries don't belong in inline styles, they belong in #media rules which appear only in a proper stylesheet.
On Chrome, you will need to edit the inspector stylesheet directly in order to include your media queries. You can reach it by going to the Sources panel and choosing inspector-stylesheet.
Since this involves writing CSS, you will need to select the element. You can (usually) get a unique CSS selector for the element you choose by right-clicking it in the Elements panel and choosing Copy CSS path.
Then just write your CSS:
#media screen and (max-width: 300px) {
/* selector for your element */ { color: red; }
}
You can use New Style Rule.
Click on Plus symbol (+) besides .cls.
and then, you'll see it generates new class. Now click on inspector-stylesheet.
You will be redirect to Sources Tab with almost blank stylesheet. Now, you can put Media Queries in there.
You can always add the CSS within style tags in the head section. Just edit the HTML by right-clicking on the html and select "Edit as HTML". For example,
<style>
#media screen and (min-width: 0px) and (max-width: 400px) {
body {
background-color: red;
}
}
#media screen and (min-width: 401px) and (max-width: 599px) {
body {
background-color: green;
}
}
#media screen and (min-width: 600px) {
body {
background-color: blue;
}
}
</style>
I had the same problem and finally figured out that when I was entering for example:
#media (max-width: 767px)
.col-sm-3 {
width: 75%;
}
my screen size was actually more than 767px. So when I pressed enter, it disappeared and seemed to not work. But what I realized is when I adjusted the screen size of my browser to below 768px, I saw the media query in the styles.
Can I use Media queries with current div style maybe like that:
.myDiv {
anyStyle : ...;
#media (myDiv's width > 100px) {
height: 40px;
}
}
I found several pages,but there said only using window params.
if anybody know how to use the media, please tell me about
I saw the links:
http://www.w3schools.com/css/css_mediatypes.asp
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
No.
You can't use media queries to check the width of an item on your website. Media queries only check the viewport variables like width and height. You should use them to check what kind of screen your user has and not what style you have applied to your div.
You should do it that way:
.myDiv {
/* your styles */
}
#media only screen (min-width: 100px) {
.myDiv {
/* other styles */
}
}
The only way to work with media queries is to rely on device type (screen, print etc.) and/or device width (min-width, max-width).
I put my default declaration in style.css and then I put all media queries in different sytlesheet called enhanced.css.
For example, I put a code in style.css something like this:
.box{height: 600px;}
and then I put a css code in enhanced.css so the box's height will decrease when it is on a smaller screen.
#media only screen and (min-width: 320px) and (max-width: 480px) {
.box{height:300px;}
}
But unfortunately it didn't work in small screen. It always follow styles from style.css. My question is, can I do something like above? To put default declaration on different sylesheet, or should I put default declaration on the same stylesheet with the media queries stylesheet ?
Thanks.
The problem is that your selectors are of equal specificity (#media rules don't have any specificity) - both rules are using one class selector (.box) and because you're loading .style.css after enhanced.css the former takes precedence. You need to increase the specificity of your #media rule if you want to include it before your regular .box rule - e.g.
#media only screen and (min-width: 320px) and (max-width: 480px) {
body .box {
height: 300px;
}