In the following media query the styles defined in the style declaration will be applied when viewing via screen AND when the minimum width is 480px wide (correct?):
#media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
What else can you put into that expression statement?
For example, I would like to condition on the URL fragment:
#media screen and (document.location.hash=="#about") {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
#media screen and (document.location.hash=="#services") {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
#media screen and (document.location.hash=="#contact") {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}
What can you put into a media query expression?
You can only put a media feature. The only available media features are documented in the spec (MQ3, MQ4).
For example, I would like to condition on the URL fragment:
That's unfortunately not possible with media queries, though that does sound like an interesting use case without having to resort to applying the URL fragment to the html or body or some other arbitrary wrapper element. I'm not sure how well it would jive with media queries though, given that the URL fragment isn't part of the device media per se, but a part of the URL. This feature would be better suited in its own at-rule (such as the now-gone #document) or as part of Selectors.
The closest pure-selector alternative I can think of (prepending :root:has(#about:target), :root:has(#services:target), etc to every selector) is in Selectors 4 and not even available to CSS, so that's a real bummer.
Related
I want to know why the media queries has less priority than normal css?
How to work around to make the media queries more important?
#media screen and (min-width: 100px) and (max-width: 1499px) {
.logo img {
width: 120%;
}
}
.logo img{
width: 100%;
}
<div class="logo">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" alt="image">
</div>
This has to do with the way the Cascade in CSS works. When two conflicting rules target the same element, the browser uses the rules of the cascade to determine which one to apply.
Selector specificity is the most important part of this: styles with a more specific selector will override those with a less-specific selector... but
media queries do not change the specificity of your selectors. This means that your two selectors have the same specificity. When that happens, the one appearing later in your stylesheet will override the earlier one.
Your easiest and best fix is to swap the order of your rulesets:
.logo img{
width: 100%;
}
#media screen and (min-width: 100px) and (max-width: 1499px) {
.logo img {
width: 120%;
}
}
This way, the media query comes later, and will override the earlier rule when the media query matches the viewport size.
If that's not an option for some reason, you will need to increase the selector specificity of the rule you want to win. Changing it to the following would work:
#media screen and (min-width: 100px) and (max-width: 1499px) {
.logo img {
width: 120%;
}
}
.logo a img{
width: 100%;
}
This way the selector now has two tags and a class, or [0,1,2], making it more specific than one tag and one class, or [0,1,1] (the zero in each of those indicates no ids, which are highly specific).
Do not use !important to fix specificity issues like this. If you need to override the style again elsewhere, the only way to do it is to add another !important. This will eventually lead to !importants all over the place, and then you will still need to deal with the specificity of the selectors.
While linking the css files in head section, just include the file with the media queries at the last. This way, it can override other style rules, if they have same specificity.
This worked well for me.
I know this may seem like a very simple question, but please understand I know very little about CSS.
Essentially, I have a responsive website with two columns. I want to add an ad on the right for Desktop, and one of the left for Mobile. So far so good, I only have to copy and adapt the code they provide on their website, and this did work for mobile, hiding the ad:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
#media (max-width: 400px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
However, how can I adapt this for desktop? I assumed all I had was to change the max-width: 400px to min-width, but it doesn't seem to be working at all... any ideas on why, and how can I fix it?
In many cases scripts that insert content dynamically tend to modify the element's inline CSS properties and that usually overrides the style definitions, because of specificity. You can learn more on specificity in CSS on MDN.
What I would recommend you to do is to add !important to your style definition to see if that does hide the element. Your style should look something like: (I added some extra info to the #media query.
.adslot_1 {
display:inline-block;
width: 320px;
height: 50px;
}
#media only screen and (max-width: 400px) {
.adslot_1 {
display: none !important;
}
}
What you could also do is open your browser's inspect tools (developer tools) and inspect that specific element to see which styles are being applied and also check that based on media query.
I'm currently working on this:
https://codepen.io/juanor/pen/gxELZN
I am having trouble getting my queries for fonts working correctly for two specific parts. They work fine for the entire project but for these two: p.maininfo and .ejkanji, .ejkana, .ejes.
This is my query:
#media screen and (max-width: 800px) {
html {
font-size: 20px;
}
I'm using for all the elements rem units, and they seem to work just fine with the query. Can someone tell my why these two are the only ones not working?
Thank you in advance!
It won't work! as It'll be overridden by already written css styles. this concept is called as specificity. Please have a look on this link. you have written styles on elements like.. body, h1-h6, li, p, etc.. so you need to override the same.
E.g,
body{
font-size: 18px;
}
h1{
font-size : 30px;
}
#media screen and (max-width: 400px) {
body {
font-size: 10px;
}
h1{
font-size : 20px;
}
}
You should not use html as the selector to change type. You can use body. I would suggest revising some of your classes and using web developer tools to make sure they are not being over-written by others.
I looked at your code and noticed that your queries can be improved upon. Look for most-used media queries.
Instead of using html as selector use *, something like as follows...
Following code is working...
*{font-size: 60px;}
#media screen and (max-width: 400px) {
* {
font-size: 20px;
}
<h1>Hwllo World</h1>
In the face of endless responsive size discussions like:
#media only screen and (max-width: 600px)
it appears that the concept of a "default" CSS file has disappeared?
Is it the case that ALL best practices assume the big three "screen," "print," and "ie" are all that are needed?
Is it the case that settings listed under "screen" are also available under "print?" Or is that still most properly covered by a "default" css sheet included with no "media" attribute?
Thank you for your time.
When using #media print or #media only screen you use scope operators to make only that section relevant to the # reference.
for example:
#media print {
h3 {display: none;
}
img {display: none;
}
body {margin-left: auto;
margin-right: auto;
width: 80%;
}
#wrapper {box-shadow: none;
}
.floatRight {float: right;
}
.clearFloat {clear: both;
}
.centerText {text-align: center;
}
li {padding-bottom: 10px;
}
}
will all only be called when the user selects print.
Any code outside of the scope ({}) will be considered regular css and apply to every page that it is linked to.
UPDATE:
The 3 main # labels should be used only for formatting for those different properties like "printing a page" or "the screen size changing for mobile". You will always have a "default" css page.
Hope this answers your question
I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.