is it possible to do something like this:
.overlay {
display: none !important;
}
#media only screen and (max-width: 768px) {
.overlay {
display: none !not-important;
}
}
so I can override it by javascript code just in mobiles.
tnx
You can override !important with your own !important, if it comes later in the css processing. However you can also use !important on a more specific element. So given the first !important is on ".overlay" if you had an id on your overlay, say "myid" then if your rule was:
#media only screen and (max-width: 768px) {
#myid {
display: none !important;
}
}
Then it would override the first, as its selector is more specific.
If you want to overwrite the display rule in 786px style, then you can write something like;
#media only screen and (max-width: 768px) {
.overlay {
display: inline (or block or anything else);
}
}
According to my knowledge, you have to write display property for all the other screen widths separately.
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 a rule in an upper query:
#media (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
that is inherited in this media query:
#media (max-width: 767.98px) {
/*.dropdown-w:hover .dropdown-content-w {
}*/
.dblock {
display: block;
}
}
Since in a lower width media query I use 'click' to display block the element intead of hovering.
But the hover overrides the click behavior. How to cause that rule not to inherit?
As 767.98px is less than 3000px, every screen-size less than 3000px gets applied with those media-queries. Same thing is happening here. As 767.98px is less than 3000px, media-queries are applied. To not apply for screen size less than 767.98px, modify your media query
#media (min-width: 767.98px) and (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
Now, windows with screen sizes less than 767.98px won't inherit the above properties because they are simply not applied to screen sizes below 767.98px..
So I'm using bootstrap to make a navbar and used their example navbar as my foundation.
I fiddled with the bootstrap file to make it so that the navbar will collapse at 995px instead of 768px. Now because of that my navbar's button stays at the left side until the window size is below 768px.
I found that if I changed
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
to
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
then it works fine.
However I put
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
into a custom.css and loaded it after bootstrap.css and no change occurred. My custom.css didn't override the boostrap.css. I would like to refrain from changing the bootstrap.css.
This is what the navbar looks like right now
This is what it should look like
So the quick fix is adding !important to your custom styles.
Another way to fix this is to make your custom styles more specific. I'm talking about the selector. You should give the element an Id and call that in your custom styles.
This makes your custom styles more specific, and therefore take precedence. You can also increase the specificity by indicating the parents in the selector.
header #yourNewId { ... } > #yourNewId{ ... } > .navbar-header{ ... }
Always apply latest rule with equal specificity selectors.
First, if not yet, place custom.css after bootstrap.css.
Then check media queries. If you just add
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
to custom, it can't override it between 768 and 994 in bootstrap.
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
Use something like it (change it to what you want):
#media (min-width: 768px) {
.navbar-header {
float: none;
}
}
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
The element is always floating left, so you won't be seeing any change. Never.
Here's my code:
#media (max-width: 480px) {
.content {padding:4px;}
}
#media (min-width:481px){
.content {padding:10px;}
}
It works properly. But, it doesn't work as I intend when I change it like the below:
#media (max-width: 480px) {
.content {padding:4px;}
}
.content {padding:10px;}
I intended to make ".content {padding:10px}" a default style. Only screen width less than equal to 480px uses ".content {padding:4px}".
With the default style last as in your example, it will override anything that has already been set. CSS is processed from top to bottom and any properties specified more than once will take the last specified value.
Therefore, put the default style first. This way if the #media query matches, it will override the already-set default style of 10px.
.content {padding:10px;}
#media (max-width: 480px) {
.content {padding:4px;}
}
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;
}
}