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;
}
}
Related
Working a lot now with CSS media queries, I wondered in which order it's best to use them.
Method 1
#media only screen and (min-width: 800px) {
#content { ... }
#sidebar { ... }
}
#media only screen and (max-width: 799px) {
#content { ... }
#sidebar { ... }
}
Like this obviously the code is shorter, but with a lot of CSS you end up having the CSS of one container spread to multiple places in your stylesheet.
Method 2
#media only screen and (min-width: 800px) {
#content { ... }
}
#media only screen and (max-width: 799px) {
#content { ... }
}
#media only screen and (min-width: 800px) {
#sidebar { ... }
}
#media only screen and (max-width: 799px) {
#sidebar { ... }
}
Like this if you specify the screen size (at which the CSS is active) for each container a new, the overview in my humble opinion is much better.
But with a lot of CSS you will use the #media query dozens and dozens times.
Does the second method cause significantly longer load time or has any other disadvantages?
EDIT:
I might have been not clear enough. My question doesn't really concern the order or the queries as such or about overwriting CSS declarations.
What I wonder about is rather the norms how other people include the media query "statments" into their css.
Lets say I have only one breaking point where I switch some CSS.
So I have one media query for min:800px and a second for max:799px.
Should I use both query "statements"
#media only screen and (min-width: 800px) { ... }
#media only sreen and (max-width: 799px) { ... }
only once in my whole stylesheet and include ALL the CSS for ALL containers into the two media query "statments"?
Or is it okay as well to use the media query "statments" mutiple times?
I mean instead of making two seperate areas in the stylesheet (one for CSS above and one for below 800px), if there are any concerns about the method of using the media query "statments" instead multiple times (for each part of the page again, like for Content, Widgets etc to make them responsive)?
I would just like to have the CSS for above and below 800px in two different parts of my stylesheet.
I know that ofc both methodes are working, I am jsut curious about the norms and if using the media query "statements" dozens or hundreds of times within a CSS sheet (instead of just twice in the case I jsut mentioned) will increase the loading times?
My answer on how you should use media queries can be applied to your question:
Here is how you should use media queries:
Remember use the sizes you like/need. This below is just for demo
purposes.
Non-Mobile First Method using max-width:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 640px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
Mobile First Method using min-width:
/*========== Mobile First Method ==========*/
#media only screen and (min-width: 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 640px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 960px) {
/*your CSS Rules*/
}
Here is a good tutorial from W3.org
Based on your edited question:
I guess this depends on each developer and how they need/think to develop his/her project.
Here is what I use to do ** (when not not using Pre-compliers)**:
I create a file styles.css which includes the general styles that will apply to the project like this:
/*========== All Screens ==========*/
{
/*General CSS Rules*/
}
Then having the media queries below, either using the non-mobile or mobile approach method explained above (in my case I usual use the non-mobile approach method).
But, depending on the projects you may need to have some other breaks besides the "standard" which can led you to use the rules in the way you mentioned.
Plus there are developers who prefer to separate into 2 files, the one with general styles CSS and other one with media queries styles.
Important: There is one difference from creating a file with general styles + 1 media queries (min-width:800px or max-width:799px), then only having a file with 2 media queries (min-width:800px/max-width:799px), which is when you have the general rules it will apply to ALL widths, therefore you just need to set the rules for 1 media queries.
Based on your last comment, the answer I could give you would be opinion-wised, so the best I can do for you is to give you a few articles so you can have your own opinion on this topic:
How many media queries is too many?
Web Performance: One or thousands of Media Queries?
Debunking Responsive CSS Performance Myths
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker
The second one will always display the content at 799px and whatever content has been styled as the style allocated for 799 rather than 800px if the device is 800px, in this case because it's 1px difference it doesn't make much different, but if you did it at around 200px different it would cause problems for your design.
Example:
if you have it this way:
#media (max-width: 800px) {
body {
background: red;
}
}
#media (max-width: 799px) {
body {
background: green;
}
}
The background would be green if the device is 799px in width or less.
if it was the other way round
#media (max-width: 799px) {
body {
background: red;
}
}
#media (max-width: 800px) {
body {
background: green;
}
}
if the device width was less than 799px the background would be green because no !important keyword has been defined.
when the !important keyword has been defined, result for example one will be the same
#media (max-width: 799px) {
body {
background: red; !important
}
}
#media (max-width: 800px) {
body {
background: green;
}
}
It won't take the processor longer unless the two elements collide. You'll be fine to vary min-width and max-width.
I suggest you to use the first method.
If you are developing a site mobile first then you won't need media queries for mobile but for tablet and desktop only.
//Mobile first
.your-mobile-styles-also-shared-with-tablet-and-desktop{
}
//Tablet
#media only screen and (min-width: 641px) {
#content { ... }
#sidebar { ... }
}
//Desktop
#media only screen and (min-width: 1025px) {
#content { ... }
#sidebar { ... }
}
If you are using a CSS pre-processor like SASS or LESS you can always create many LESS or SASS components that you will include in your main.less or main.scss / .sass file.
So each component will have not so many media queries and you can divide each component with some comments like shown above.
Your code this way will be easier to read and also much shorter, because all properties shared by tablet and desktop can be defined at the beginning of you CSS component file.
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 want to change the width of a div\grid via a media query for desktop users, but can't get the style to apply.
Here is the div in Chrome dev tools:
So I want to set the width of my .ticketInforHeader div. I tried to do this, but it does not do anything:
#media screen and (min-width: 992px) {
.ticketInfoHeader {
width 30%;
}
}
Try using
#media screen and (min-width: 992px) {
.ticketInfoHeader {
width 30% !important;
}
}
I guess if you're using Bootstrap's grid the width of the columns will be defined by the already existing classes like .col-md-4
You might need to add an !important to overwrite the Bootstrap style
#media screen and (min-width: 992px) {
.ticketInfoHeader.col-md-4 {
width 30% !important;
}
}
but that doesn't look really good in the code and I feel it breaks the logic of using bootstrap's grid.
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've got some CSS and media queries which hide and show my navigation:
So by default the navigation is:
nav {
display: inline;
}
Then using media query I hide it:
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
All works perfectly well, I then have some JavaScript hooked up to a button to show and hide the navigation when the media query is in effect.
However when I resize the browser back to full screen, larger than 767px the navigation does not reappear. How can I get the navigation to appear for desktop users?
bind the jquery resize handler to the window like this
$(window).resize(function(e){
if($(window).width() > 767){
$('nav').show()
} else {
$('nav').hide()
}
})
there is probably a few optimisations you can do with caching objects but this should get you want you need to start with
#media all and (min-width: 768px) {
nav
{
display: inline!important;
}
}
Kai Qing's answer helped me realise that I just needed to override the inline CSS the jQuery .toggle event was adding - Inside the correct media query of course.
You can make the js add a class to the nav and use !important to overwrite the media query statement...
nav {
display: inline;
}
.force_display{
display:inline !important;
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
just add force_display class in the js function (assuming you're using jquery)...
$('#button').on('click', function(){
$('nav').toggleClass('force_display');
});