I am trying to manipulate the view when the screen is less than 600px.
for some reason, it does not work for this width, it only works for higher width.
*For testing purposes when the screen is less than 600px I am trying to hide the entire body.
Here is my code:
https://codepen.io/eyalankri/pen/qzbdVm
if you change this:
#media (max-width: 600px) {
body{display: none}
}
To This:
#media (max-width: 1000px) {
body{display: none}
}
It will work.
Can someone help me understand why it does not work for 600px ?
Thanks.
Related
I've been stuck on the following problem for a while now.
#media screen and (min-width: 414px) and (max-width: 600px) {
/* appropriate code */
}
#media screen and (min-width: 601px) and (max-width: 767px) {
/* appropriate code */
}
The issue I have is that when a screen is on the specific width of 767px, no styling is applied. What really confuses me is that on the other hand the specific width of 600px does work, while both are the max-width value of their respective media query. I have had this issue with other similar media queries but decided to simply provide you with those two to make my problem clear. I have tried out several things (verifying zoom value of browser, trying on different browser) but it doesn't seem to work. At first I thought it might be a bug but it's a recuring problem. Do any of you have an idea as to what might be the problem?
It's working correctly on my side. But for more accuracy, you can use decimal values like so.
/* 414 -> 413.7 600 -> 600.3 */
#media screen and (min-width: 413.7px) and (max-width: 600.3px) {
div {
color: red;
}
}
/* 601 -> 600.7 767 -> 767.3 */
#media screen and (min-width: 600.7px) and (max-width: 767.3px) {
div {
color: blue;
}
}
<div>Hello</div>
When min-width is used, it means the lowest width and styles are set for the higher width
When max-width is used, it means the maximum width and styles are set for the width less than that
When both are used, styles are applied when the width between the values is entered
Im trying to make my website responsive but when i try and change the css styles for the different sizes some of them are not working and im not sure why.
I have styled my website and then used the following line and it works perfectly fine when the size of the screen reaches 1680
#media only screen and (max-width: 1680) {
css style...
}
but when i try and do it for the next size it doesn't resize:
#media only screen and (max-width: 1366) {
Everything that i put in here doesn't work
}
Am i doing something wrong here?
Are they supposed to be in the same class or does it not matter as long as i link the class to the html document?
It looks like you forgot the "px".
Generally speaking, you may want to define a range, such as:
#media screen and (min-width: 1366px) and (max-width: 1680px) {
}
As-is, any css you have in the 1366px media query should display between 0px and 1366px.
You had been forgotten to put px after your number.
#media only screen and (max-width: 1680px) {
css style...
}
I have a media query for a website which depends on the width of the viewing window:
#media (max-width: 600px) {
...
}
This works perfectly.
I found that there was an issue with the site menu being cut off on certain devices because the height of the viewing window was not taken into account in the above statement, so I adjusted the statement accordingly (the menu is usually vertical but with the small screen or small height the menu should be changed to being horizontal) :
#media (max-width: 600px), (max-height: 400px){
...
}
However this does not work, the max-width value works but if I resize my window (Firefox and Chrome) to a letterbox size (<400px) then it doesn't run the corresponding height rules contained in the media query.
I have also played with variations such as :
#media all and (max-width: 600px), all and (max-height: 400px){
...
}
But with no success.
I have read various articles about CSS height but I can't see why my rules above are not applying? Any answers?
Tried
#media (max-width: 600px) and (max-height: 400px) {
body {
background:#000;
}
}
and worked fine!
UPDATE: the OR worked too http://jsfiddle.net/noj3u3xn/
#media (max-width: 600px), (max-height: 300px) {
body {
background:#000;
}
}
Maybe you can share more of your css?
The issue appears to be solved when applying the opposite query to all other media query cases:
such as all OTHER media queries need to have a and (min-height: 401px) appended to each of their cases, so they do not overwrite the case above.
cheers
Website I've been working on just started ignoring all media queries. I can't seem to find the problem.
http://fnd.instinctdigitalmedia.com/
On the homepage the images under the 'Browse our Products" section shoud change based on screen width. at 320px, 480px, and 768px screen width it still shows the originals.
You must target the ancestor or parent to override what the previous query has done.
From 760px to override its style rule you should add call the parent #content of the img to override the rule in 760px
Example:
#content > img {width:25%;}
}
#media screen and (max-width : 480px){
#content > img {width:50%;}
}
#media screen and (max-width : 760px){
img {width:100%;}
}
There's a few issues I can see. Firstly, media queries aren't firing because:
There's a closing parenthese missing on line 899, flipping an error. To find this, I added my own media query showing something obvious, and pasted it at the top of the CSS, then further and further down until it stopped working.
Also, the mobile view failed because you are missing 'and' in your media query:
#media only screen (min-width: 320px) and (max-width: 480px) {}
It should be:
#media only screen and (min-width: 320px) and (max-width: 480px) {
As for the width break itself, a handy trick with responsive designs is to limit this kind of issue from ever occurring before you even start styling (this is a rough guide, not a comprehensive list):
img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
max-width:100% !important;
}
Even when respecifying the widths of your images, you are still using pixel widths instead of a relative measurement like percentages. This means the images will stay a static size and won't resize correctly to the screen no matter what.
Lastly, you are using a 'bracketed' approach for your media queries. This means rather than allowing your existing CSS to cascade down your media queries, saving you having to specify things twice that aren't going to change, you must repeat the same code many times.
For example, you currently have:
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-cat-1 {
position: relative;
display: block;
margin: 0 auto 10px auto;
width: 430px;
height: 150px;
background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
}
}
Anything below 768px must be specified all over again. This leads to massive amounts of repeated code, and a lot of extra work for you. The simpler approach would be:
#media only screen and (max-width: 1024px) {
/* all styles for under 1024px */
}
Then for anything smaller:
#media only screen and (max-width: 768px) {
/* only styles that need to change when under 768px wide */
}
I'm trying to make my website design responsive.
So far, I've got the following rules:
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
For some reason, the last media query doesn't work. In fact, it completely strips all styles from every element on the page.
I've been looking around and I can't find any hint as to why this is or what I'm doing wrong...
I feel like I'm missing a concept or something... Everyone's talking to me about percentages, and while I'm taking that on board, I'm not seeing how it relates to the media queries not applying the style rules.
Can anyone provide any clarity?
Thanks in advance!
You don't have a closing comment tag.
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
Nothing else wrong here.