I have been trying to hide an element at a max-width of 980px using media queries but for some reason it is still displaying.
If I use a media query with min-width the element disappears but with this code it is still showing and I can figure out why?
#media (max-width: 980px) {
.welcome-msg {
display:none;
}
}
Can anyone see anything wrong with my code? I'm using FF responsive design view fro testing at the moment.
With your current max-widthmedia query, display:none is going to apply until the document reaches a width of 980px, rather than at 980px.
From your question, it seems like you want the opposite to happen, which is why you've had success with min-width. Switching from max-width to min-width should solve things.
Otherwise, you are going to have to set your element to display: none in your non-media query css, and use display:block in your max-width media query.
CSS
/* Only applies while screen is 980px or less */
#media (max-width: 980px) {
.welcome-msg {
display:none;
}
}
/* only applies while screen is 980px or greater */
#media (min-width: 980px) {
.welcome-msg {
display:none;
}
}
/* if you must use max-width, this is a solution */
/* otherwise, use min-width IMHO */
.welcome-msg {
display:none;
}
#media (max-width:980px) {
.welcome-msg {
display:block; /* element will only show up if width is less than or equal to 980px */
}
}
If that's not what you are trying to accomplish, It would be helpful to have a Codepen example for us to better answer your question.
Good luck!
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
I have written a CSS media query
like this -
#media screen and (max-width: 59.9375em) {
.left {
display: none;
}
}
This works fine across all the browsers except Safari 10.0.4 and below.
Safari seems to be handling the media queries differently.
Other browsers seem to be taking the window.innerWidth as viewport width for triggering media queries, but safari seems to be taking document.documentElement.clientWidth as viewport width and triggers the media queries accordingly.
I can see a difference of 15px between the actual and expected breakpoint.
I am looking for a cross-browser way for dealing with this issue.
Thoughts are welcome, thanks in advance.
The window width vs actual width is actually a super interesting topic. Snuggug has a really extensive explanation for it, but in short it's based on how the scroll bars are placed in different browsers.
Some browsers overlay the scroll bar on top of the content/site. Other browsers shorten the width of the content/site and have the scroll bar next to it. This obviously creates some discrepancies in how different browsers calculate the width of the viewport.
A potential problem is your usage of em as a unit of measurement.
It is important to remember that em is a measurement unit based on your current font size, and is therefore open to browser interpretation.
Depending on your font-family and overall font-size, 60em is usually around the area of 800px. Which means your query would be more specific looking like this:
#media screen and (max-width: 800px) {
.left {
display: none;
}
}
If you are unsure about the styling being overridden, you can always apply an important rule like this:
#media screen and (max-width: 800px) {
.left {
display: none !important;
}
}
If you would prefer to not use the !important tag in your CSS, then you will need to ensure that you look out for the two scenarios listed below:
CSS reads from Top to Bottom
This means that if you have a rule specified for your .left element, it needs to be placed before your media query and not after
The WRONG layout would look like this:
#media screen and (max-width: 800px) { //media query BEFORE rule
.left {
display: none;
}
}
.left {
.display:block;
}
The CORRECT layout would look like this:
.left {
.display:block;
}
#media screen and (max-width: 800px) { //media query AFTER rule
.left {
display: none;
}
}
The next bit to keep in mind is:
Nested CSS selectors take precedence
Use the same amount of parent selectors (or more) in your media query rule.
The WRONG series of selectors:
.container .left { //2 selectors used in query
.display:block;
}
#media screen and (max-width: 800px) {
.left { //only 1 selector used in query therefore overwritten by the previous rule - this should have atleast 2 selectors to overwrite the previous rule
display: none;
}
}
The CORRECT series of selectors:
.container .left { //2 selectors used in query
.display:block;
}
#media screen and (max-width: 800px) {
body .container .left { //3 selectors used in query
display: none;
}
}
use px (pixels) instead of em.
em is not fixed but it is relative. parsed different for different browsers.
#media screen and (max-width: 59.9375px) {
.left {
display: none;
}
}
try this css hack :
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
#media {
.left {
display: none;
}
}}
Source : https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/
You should read these two articles:
https://zellwk.com/blog/media-query-units/
https://adamwathan.me/dont-use-em-for-media-queries/
Then you'll understand why you have the problem you've asked about.
TLDR: em values are based on root font-size values, but in the case of Safari vs other browsers, em is either relative to the initial value or the root value (browsers pick one or the other for media queries, but not both, which can cause discrepancies across browsers)
you have to use media query after .left class as per the css rule
For example
.left {
display:inline;
}
#media screen and (max-width: 59.9375em) {
.left {
display: none !important; //important will override all the .left class.
}
}
I want to get the screen width as a variable for a simple if statement. Basically if the screen is > 768 it will display the normal website. If it's < 768 than it displays a more compact version. It's just a little fix for ipad resolution. I already know how to update the webpage once i get the info, just how do I get the values in the first place?
use javascript..
there is a property called
.screenwidth()
here is a link:
http://www.w3schools.com/jsref/prop_screen_width.asp
You could use CSS media queries:
#media all and (max-width: 768px) {
body {
background: #ccc;
}
}
Further reading:
http://css-tricks.com/css-media-queries/
You need CSS3 media queries
http://www.w3.org/TR/css3-mediaqueries/
http://webdesignerwall.com/tutorials/css3-media-queries
/* Any CSS for bigger screens / default CSS goes outside the brackets */
div {
/*here*/
}
p {
/*or here*/
}
#media screen and (max-width: 768px) {
/*css specific to small screens under 768px width here*/
div {
/*here*/
}
p {
/*or here*/
}
}
What should be really simple is not working at all. I just want to set a div to display none until the width is greater than 980px. However it only works while the screen is at 980px but nothing more or less than that!!
/* Should work while screen is 980px or less */
#media (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
I think you need to check for both min-width and max-width.
Try
/* Should work while screen is 980px or less */
#media screen and (min-width: 1px) and (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
From CSS Media Queries on the Mozilla Developer Network.
u need to set the type of media
#media screen and (max-width:980px){
.large-screen-hide {
display:none;
}
}
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.