I feel embarrassed asking this question, but I've tried all kinds of ideas and googled quite a bit.
HTML:
<div class="image-full"></div>
CSS:
.image-full {width:100px;height:100px;background-color:#000;}
#media (max-width: 767px) {
.image-full {background-color:#f00;}
body {background-color:#f00;}
}
#media (min-width: 768px) and (max-width: 991px) {
.image-full {background-color:#0f0;}
body {background-color:#0f0;}
}
#media (min-width: 992px) and (max-width: 1199px) {
.image-full {background-color:#00f;}
body {background-color:#00f;}
}
#media (min-width: 1200px) {
.image-full {background-color:#ff0;}
body {background-color:#ff0;}
}
I simply want the div to change background color like the body background is.
What am I missing?
Fiddle here: http://jsfiddle.net/bn5bh6xj/
EDIT:
Both solutions below work.
My problem was that I had a hidden character ( Â ) earlier in my CSS code. I sometimes get them when I code on my mac (in both Sublime Text and Coda, on several different macs and OS X versions). I've spent hours trying to find the reason for them, but no luck. They always appear in PHP before opening a bracket block, like this:
if (hello > 1)Â {
}
They are only visible if I change from UTF-8 to ISO 8859-1.
Remove the background-color declaration from the top. It is overriding your background-color declarations in the media queries.
Add a !important after the background color:
#media (max-width: 767px) {
.image-full {
background-color:#f00 !important;
}
body {
background-color:#f00;
}
}
FIDDLE
Related
I have issues with my media queries. It seems like they do not work in either browser. I tried in Opera, Chrome, Firefox. This is the page http://amatalents.com/about-us.html and those are media-queries for main div section
#media screen and (min-width: 150) and (max-width: 400) {
.windows div {
width: 100%;
display: table-column;
}
.windows div a {
font-size: 10px;
color: green;
}
.windows {
background-color: red;
}
}
I also validated the css file and first time it did fine and only mentioned the css parser error reffering to media queries part of the file, but the second time it referred to media queries only without mentioning parser error.
I am lost...
Please help!
You are missing px.
#media screen and (min-width: 150px) and (max-width: 400px)
I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}
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 have came across a problem, whenever I make my browser smaller the text stays the same and it doesn't go smaller. How do I make the text go smaller when I the browser gets smaller?
Please visit http://jsfiddle.net/xiiJaMiiE/PjbHs/ for my website
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
Thanks in advance!
As mention above you need to use media queries if you want to change your font-size (or any other CSS value based on browser / screen size)
Below is example based on Mobile Screen Size
// Work For All Other Screens Except the one which we redefine in bottom
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.home {
font-size:20px;
}
}
You only need to define value which you want to change browser rest all values form above style and only change font-size to 20px on screen size 320px
Keep in mind you need to include libraries like https://github.com/scottjehl/Respond in your page to support older browsers
This css should work for you... simply adjust/delete the query breaks as needed and adjust the font size as well.
.home {
font-family:apple;
position:relative;
font-size:25px;
color:black;
top:20%;
display:inline-block;
}
#media all and (min-width: 1281px){
.home{font-size:25px;}
}
#media all and (min-width: 1025px) and (max-width: 1280px) {
.home{font-size:22px;}
}
#media all and (min-width: 769px) and (max-width: 1024px) {
.home{font-size:18px;}
}
#media all and (min-width: 481px) and (max-width: 768px) {
.home{font-size:16px;}
}
#media all and (min-width: 321px) and (max-width: 480px) {
.home{font-size:14px;}
}
#media all and (max-width: 320px) {
.home{font-size:14px;}
}
I would highly recommend to not use px for font sizes, as each browser has a different standard font size to begin with. however there is an alternative which can give you the result you want across all browsers, old and new.
css:
#px {
font-size:25px; /*this was the size you want*/
}
#percent {
font-size:160%; /*this is what it is in % but give you the support for crossbrowser coding*/
}
incase you want to try it out here is the html to show you the difference
html:
<p id="px">HELLO</p>
<p id="percent">HELLO</p>
It's possible using viewport units but it does require a small amount of JS/JQ due to a minor bug.
http://css-tricks.com/viewport-sized-typography/
http://caniuse.com/viewport-units tells browser support
Codepen Demo
CSS
p {
font-size:1vw;
}
JQ
causeRepaintsOn = $("p"); /* could include any text related tags */
$(window).resize(function() { causeRepaintsOn.css("z-index", 1); });
So I've dived into 'Responsive Design' and have gotten a fair understanding of how this works. However there are specifically two things I need to get my head around.
My "logical" way of thinking is like this: If screen size is less than 320px, then do A, if screen size is less than 480px do B.
#media only screen and (max-width: 320px) { Do one thing here}
#media only screen and (max-width: 480px) { Do another thing here}
The problem with this is that css in max-width: 480px is also affected if screen width is less than 320.
When I look at examples, I see they are using something like:
#media only screen and (min-width: 290px) {}
#media only screen and (min-width: 544px) {}
#media only screen and (min-width: 960px) {}
This basically says that is screen is larger than 290px, do this and if screen is larger than 544px, do that. But I will get the same problem here. Code in min-width: 290px will also be used in any screen size larger than 290px.
So the only solution I can think of that will only work for a specific screen range, is using this:
#media only screen and (max-width: 320px) {}
#media only screen and (min-width: 321px),
only screen and (max-width: 480px){}
#media only screen and (min-width: 640px),
only screen and (max-width: 481px){}
Can anyone advice me on this?
Looking at examples, I see a loot of "redundant" code. Much of the same code is repeated, just having different values:
#media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav li:last-child a, nav li:nth-child(4) a { border-right: none; }
nav li:nth-child(5) a { border-bottom: none; }
}
#media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav li a {
width: 50%;
font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a { border-right: none; }
nav li:nth-child(5) a { border-bottom: 1px solid #fff; }
}
For large sites, I can just imagine that this will create a lot of code and large CSS files.
Is this becoming the new standard as we have to work with responsive design?
Would it be an option to do following?:
#media only screen and (min-width: 640px) { #import url("css/640.css");}
For a start you're writing/referencing slightly more code than is necessary.
For example:
#media only screen and (min-width: 321px),
only screen and (max-width: 480px) {
can also be written as:
#media only screen and (min-width: 321px) and (max-width: 480px) {
You should never be repeating CSS inside a media query, anything that is set for any screen size, for example background colour or font-family should be set outside of any media query. This means it is only wrote once and applies to them all. Inside each media query should only be code that only affects that specific size. (e.g. widths, font-sizes, etc)
I wouldn't recommend importing css files and the like, just put it all into one, with global styles at the top, and then screen size specific styles inside media queries underneath that. Don't be put off by large css files, it is easier/quicker to download one 10kb file, than ten 1kb files.
I made an example .css file to show you here. Note this would create a horrible site, it is just intended to show you how you could layout code and what goes where.
The example above assumes browser support of media queries. Without it the site would fall on its arse. If you aren't 100% sure of media query support (and aren't using Respond.JS) I would recommend putting the desktop site in the global styles, then overwriting as unnecessary to ensure a fallback for non-supporting browsers
What you wrote is pretty much a way to do it. but like BoltClock says, you have many ways to make a responsive website.
Altho, to avoid 'double' css, you can also make a main css file. Those things that don't need to change in the whole website - no matter what screensize - goes into this file. (for example your font). Besides that your css files will indeed be 'huge' depending on how far you want to go with responsive.
For answering your question if this will be the new standard...it still depends on the owner of the website, if he wants to support mobile friendly websites or not.
I hoped this helped a bit :) good luck!