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
Related
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
So I understand the (min-width: 1400px) and (max-width: 1400px) are break points for when the CSS reaches those breakpoints it supposed to go back to its default sizing.
This is what I have done. I have my main CSS file that has its default sizing and another CSS file called query.css that controls the responsiveness of the web page.
This is how I have certain parts of both files to adjust accordingly
main CSS
.h1,.h2,.h3 {
font-size: 70px;
font-family: Cinzel, sans-serif;
}
.nav-link {
padding-left: 10rem !important;
}
query CSS
#media (min-width: 1400px) {
.h1,.h2,.h3 {
font-size: 1em;
}
.nav-link{
padding-left: 5em !important;
}
}
This is where it confuses me. The main CSS file settings are meant to be the main one, but the query CSS seems to overwrite the main CSS and it really messes up when I try and do responsive design.
I get that this min-width:1400px is meant to say if it goes from 2000px down to 1400px it must keep the min-width:1400px, but then what is the point of having the main CSS if the min-width:1400px just negates the main CSS file settings.
Its very frustrating working like this.
... it must keep the min-width:1400px ...
That's not how min-width works with media queries.
The min-width rule effectively says "apply this block of CSS if the viewport is at least this wide", in this case at least 1400px. if the viewport width is less than 1400px then the CSS surrounded by the media query will not be applied and the styles defined in main.css will take precedence.
#media (min-width: 1400px) {
/* CSS that is only applied if the viewport is >= 1400px */
}
Also, be careful about the order that the CSS files are included in the page. If query.css was included before then the media query it contains would always be over-ruled by the CSS in main.css.
It's a little more complicated than this when you take specificity in to account, but you should get the general idea.
For more info, take a look at the documentation for the media query min-width rule.
An important aspect of media-queries is structuring them correctly - especially if you're using a combination of #media (min-width: x) and #media (max-width: x).
CSS is read from top to bottom - this means that the last property applied to your desired selector will take priority, as long as its valid. This means that a more "precise/accurate" media-query rule prop will not take priority over another, if the media-query is placed below the other and both of their rules are valid. This means you can't just throw in media-queries at random locations in your CSS-file, because the CSS is just going to be overwritten.
Note that this doesn't apply on more specific selectors, but in my personal preference, I don't like mixing the specificity on a selector across multiple media-queries.
Because of this, you should always make media-query-rules with:
A descending pixel value if you're using max-width
An ascending pixel value if you're using min-width
In this example, the min-width-media-queries below the max-width-media-queries
This way, the first media-query will always take priority as long as its rules apply. When the second media-query's rule apply, that will take priority instead and so on. Try dragging the screen size of this code snippet in full page and you'll see how this code structuring works.
div {
width: 150px;
height: 150px;
background-color: red;
}
#media screen and (max-width: 412px) {
div {
background-color: green;
}
}
#media screen and (max-width: 360px) {
div {
background-color: yellow;
}
}
#media screen and (min-width: 320px) {
div {
background-color: orange;
}
}
#media screen and (min-width: 414px) {
div {
background-color: black;
}
}
#media screen and (min-width: 428px) {
div {
background-color: purple;
}
}
#media screen and (min-width: 768px) {
div {
background-color: pink;
}
}
#media screen and (min-width: 800px) {
div {
background-color: gray;
}
}
#media screen and (min-width: 820px) {
div {
background-color: limegreen;
}
}
#media screen and (min-width: 834px) {
div {
background-color: blue;
}
}
#media screen and (min-width: 884px) {
div {
background-color: teal;
}
}
<div></div>
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 am creating a responsive design for my site and I have read quite a bit on media queries and breakpoints. I understand that there is no set breakpoints since there are so many screens now-a-days and we need to choose the best that suits our layout. But what I am not sure is if its okay to have different breakpoints for each element styled separately or is it better to group all the css to a common breakpoint that I use in my entire site. Here is an example to explain what I mean by this:
Right now I do something like this:
Method 1:
.search_bar {
width: 30%;
float: right;
}
/* Media Queries for Search Bar */
#media only screen and (max-width: 900px) {
.search_bar {
width: 40%;
}
}
#media only screen and (max-width: 780px) {
.search_bar {
width: 50%;
}
}
#media only screen and (max-width: 500px) {
.search_bar {
width: 100%;
}
}
.side_bar_wrap {
width: 300px;
}
/* Media Queries for Side Bar */
#media only screen and (max-width: 850px) {
.side_bar_wrap {
width: 250px;
}
}
#media only screen and (max-width: 600px) {
.side_bar_wrap {
width: 150px;
}
}
#media only screen and (max-width: 400px) {
.side_bar_wrap {
display:none;
}
}
etc..etc..
If you noticed above, I do not have a set number of breakpoints for my entire template. I defined different breakpoints for each element based on how that individual elements behave in different screen sizes. This gives me an accurate way to align individual elements rather than defining all the elements in a common breakpoints. What I dont know is if the above method is recommended (or okay to use) or should I not do it like that? Do I need to change the above into something like this where I create common breakpoints for my entire website and add the styles grouped together into one of these common breakpoints? Something like:
Method 2:
.search_bar {
width: 30%;
float: right;
}
.side_bar_wrap {
width: 300px;
}
/* Common Breakpoints to my entire site */
/* Media Queries for all elements are grouped into one of these */
#media only screen and (max-width: 900px) {
.side_bar_wrap {
width: 250px;
}
.search_bar {
width: 40%;
}
}
#media only screen and (max-width: 750px) {
.side_bar_wrap {
width: 150px;
}
.search_bar {
width: 50%;
}
}
#media only screen and (max-width: 500px) {
.side_bar_wrap {
display:none;
}
.search_bar {
width: 100%;
}
}
Is my first method a valid practice or I shouldn't be doing it like that? Can someone advise me if I am doing it right or wrong plz?
You are looking for best practice and solutions for questions like that are often based primarily on opinions. I'll try to give an objective answer, though.
In my opinion the most maintainable variant would be to go with method 2, i.e. keep media selectors to minimum:
It easily allows to split CSS for different media devices to separate files.
You have better outlook at what needs to be customized across different layouts: instead of scattering it, you keep it in one place.
It makes CSS output code smaller, implying negligibly faster loading times.
Cons are that you scatter semantically coupled definitions, i.e. in this example rules for #menu get scattered all over the place:
#menu { base rules ... }
other base selectors and rules ...
#media only screen and (max-width: 500px) { #menu { custom rules 1 } }
#media only screen and (max-width: 700px) { #menu { custom rules 2 } }
One solution to that would be giving up on trying to define base rules and define everything that needs to be customized in media selectors. That's not very good approach since you easily break Don't Repeat Yourself principle. Another, better approach would be to introduce base containers, like #menu-container which has constant base rules, and then #menu "implementation" which has rules defined exclusively in #media selectors.
Anyway, the point is not to mix base rules with device-specific rules, since it creates confusion when reading and modifying the code. (An exception to that are rules that define default layout on all devices; I'd keep these near device-specific rules.)
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;
}
}
Ok so today I said hey, let's learn us some Responsive Web Design Techniques. So far so good I suppose ;)
#media screen and (min-width: 768px) {
#avacweb_chat{
height: 70%;
width: 600px;
}
}
#media screen and(min-width:600px) {
#avacweb_chat{
height: 70%;
width: 540px;
}
}
#media screen and(min-width:480px) {
#avacweb_chat{
height: 500px;
width: 320px;
}
#chatbox_members{
display:none;
}
}
#media screen and(min-width:320px) {
#avacweb_chat{
height: 360px;
width: 220px;
}
#chatbox_members{
display:none;
}
}
I wanted to ask a few question to some of my great S.O. members, so I see the media query is focused on screen is there anyway to do this
#media #avacweb_chat and (min-width: 500px) {
}
Or are we only allowed to focus on screen size? Also are we allowed to use transitions and transform in these media queries? (I know IE won't support). these are the only two questions I have.
Focusing on size of another element besides Screen
Adding CSS3 to the queries.
Also are we allowed to use transitions and transform in these media queries?
Yes, for sure. Simply include them as you normally would
is there anyway to do this
#media #avacweb_chat and (min-width: 500px) {
}
Not sure what you are getting at here. If your goal here is to cusomise the avacweb_chat div for viewports above 500px, use
#media (min-width: 500px) {
#avacweb_chat{
/* some styles here */
}
}
If you are just getting your feet wet with responsive design, have you considered some of the options like Bootstrap or Foundation or one of the many other good choices. They aren't necessarily for everyone, but they'll get you off to a fast start.
Have fun with RWD!