So I have the following fiddle: http://jsfiddle.net/9vu64/
I was currently implementing my queries for my dummy site which were working fine until I added the following below. As seen in the fiddle it seems that #header adapts to the media query header width at any resolution. I remove it, it works fine no problem. I can't seem to figure out the culprit. Thanks.
#media (min-width: 325px) {
#contain {
width:285px;
}
#header {
width:285px;
}
CSS
Use: max-width
#media (max-width: 325px) {
#contain {
width:285px;
}
#header {
width:285px;
}
}
Also, I would suggest using Percentage and give a default width.
For example:
#contain{
width: yyyypx;
}
Then do media queries for max-width. One more thing, you are doing device width - I would suggest screen width
Related
I have two (actually three) #media sections in my CSS. From my experience I hoped that one will override each other because it comes later in the CSS file. However this is not the case (on multiple browsers). What am I doing wrong?
HTML:
<div id="experts-partition-1"></div>
CSS:
#media (min-width: 410px) {
#experts-partition-1 {
clear: both;
}
}
#media (min-width: 970px) {
#experts-partition-1 {
width: 0px;
float: right;
}
}
The browser applies the rules for experts-partition-1 of the first section (min-width: 410px) and not of the second section (min-width: 970px). What might be the reason?
Your code is working, but the condition is, you have to go above 970px to work #media (min-width: 970px) or you can try max-width instead of min-width and sequence should be like this
#media (max-width: 970px) {
#experts-partition-1 {
width: 0px;
float: right;
}
}
#media (max-width: 410px) {
#experts-partition-1 {
clear: both;
}
}
The reason behind using this sequence is the nature of css. It works from top to bottom. Hope it helps
You are using Mobile First Approach to design webpage. You have specified a ruleset in this media query
#media (min-width: 410px) {
/* this means rules are applied when the screen size is min 410px and also above that */
}
Mostly in web development there are two approaches
1. Mobile First
2. Desktop First
Choose one based on the requirement and proceed with it. For better understanding checkout this link about Mobile First vs Desktop First Approach
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*/
}
}
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}
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!