When I put the code below through the CSS Linter I get six errors. Are these bugs in the linter or the CSS? I can't see anything wrong with the CSS. I can't seem to turn off or ignore the errors either regardless of the settings.
#media ( max-width: 320px ) {
.test {
padding: 20px;
}
}
I only had to remove the spaces for it to pass:
#media (max-width:320px) {
.test {
padding: 20px;
}
}
Your code is valid it's just that css link is being picky about the formatting.
If you change it to the following it's quite happy with it:
#media(max-width:320px){.test{padding:20px;}}
I'd recommend using this site to validate your css:
http://jigsaw.w3.org/css-validator/
Related
I am calling 2 different css files. Two css properties are conflicting. But this is ignored even though the 2nd css part is more specific. Where is the problem? I looked at the CSS hierarchy. But it was supposed to run smoothly this way...
I'm not sure if this problem is related to the order of calling the CSS file.
Ignored
#media (max-width: 500px) {
div.fb_dialog.fb_dialog_mobile>.fb_dialog_content iframe:not(.hs-form-iframe) {
width: 60px !important;
height: 60px !important;
}
}
Acceptable
#media (max-width: 500px) {
iframe:not(#tidio-chat-iframe):not(.hs-form-iframe) {
width: 100% !important;
height: 100% !important;
}
}
I went through the hierarchy details and solved the problem. If anyone else has this problem later, I leave the solution here. No matter how specific the selector is in CSS, the ID selector is always more dominant. To fix the problem, I just had to add id to the ignored CSS. I figured it out with the specificity calculator. It works perfectly now.
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>
#media screen and (max-width: 1336px) {
.rectangle-box {
visibility: visible;
}
#p-cactions {
top: 461px;
left: 410px;
}
}
#media screen and (max-width: 1040px) {
.rectangle-box {
visibility: hidden !important;
}
#p-cactions {
top: 461px !important;
left: 1110px !important;
}
}
I put these on the top of a css files code and they work but when i put them on the bottom of the code in the css file they dont work at all. Why is my css working in reverse? im using chrome. the css file is main.css for monobook skin in mediawiki. I guess its good i got it to work im just curious.
You must not edit main.css or hack other code code directly! The results are not predictable.
Use the gadgets extension and manage your JS/CSS directly on your wiki. There are gadget options to make them top-loaded if needed.
If you want to do more complex things server-side, read the developing with ResourceLoader doc page. It also has advice on media queries and what to top-load.
I have already figured out a way to make this all work in main.css in a very predictable way. thanks but i have already solved the problem. I changed #media screen to #media. i placed this at the bottom of the css file and it works.
I need to make a website responsive built in 2012. I'm editing the style.css file (Wordpress website) but the media query doesn't work for some reason. Already checked the css file online, and the media query is in it.
The website I'm talking about is www.carter-realestate.be
There is nothing wrong with the media query, I've done this a hundred times before.
The style.css file with the media query is online, so you can check it out.
Anybody knows an explanation for this?
You need to add a space between "and" and "("
#media screen and (max-width: 900px){
Trying changing it to:
#media only screen and(max-width: 900px){
body{
background-color: red !important;
color: blue;
}
h1{
font-size: 15em;
}
}
There's some script on your page that's re-writing the #media rules.
Looking at your source code in style.csss I see:
#media all and(max-width: 900px){
body{
background-color: red !important;
color: blue;
}
h1{
font-size: 15em;
}
}
But checking it out in Firebug (via Firefox) I see the code changed in the DOM to:
#media not all {
body {
background-color: #FF0000 !important;
color: #0000FF;
}
h1 {
font-size: 15em;
}
}
Somewhere a script is re-writing the #media rules to "not all".
Try disabling all scripts in the WordPress plugin and refresh the page. If that doesn't work, edit the HTML and comment out any remaining scripts loading. Then add a script or plugin back in one by one until you find which is re-writing the DOM.
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.