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.
Related
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 am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.
Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.
Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?
Because css is read from top to bottom. The rule that is set last, is the one that will be executed.
Translating, it is like this:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red; //Paint it red
}
}
.text {
color: yellow; //Now, forget about everything and paint it yellow!
}
When you add !important is like saying:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red !important; //Paint it red, and don't change it ever!!!
}
}
.text {
color: yellow; //Ok, I'm not going to paint it yellow....
}
CSS is read from top to bottom.
Everything that is below some other css will overwrite what's on top of it.
It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else
body{
background-color: black !important;
}
body{
background-color: pink;
}
The background-color will be black.
If you remove the !important, it will be pink.
Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.
For example:
.my-class {
color: red;
}
.my-class--modifier {
color: blue;
}
#media screen and (min-width: 760px) {
.my-class--modifier {
color: green;
}
}
.some-other-class {
width: 200px;
}
#media screen and (min-width: 760px) {
.some-other-class {
width: 700px;
background-color: gray;
}
.some-other-class .my-class {
border: 2px solid red;
border-radius: 4pt;
}
}
This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.
Basically you are using media queries when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).
When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.
Hence the order goes like this: Make complete design --> Add the media query to fit for desired screen sizes at the bottom.
It is preferrable to write the query at the bottom became of precedence. That will save you from stress of using important! everytime.
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/
I am looking for a way to use the same stylesheet for print media as for the default onscreen layout. The advantage to me will be that I won't have to update 2 files every time I update the CSS. I would prefer to have one stylesheet and specify special rules for print media by denoting them somehow… It may not be possible, but I thought I'd put the question out there.
If you want the styles to be the same across all media, just define the common styles in the stylesheet as normal (i.e. not in any media rule) then put the media specific elements in the relevant rules.
If you want some styles to apply to a subset of media, you can do it like this:
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
Here's a link to the relevant W3C page
There's this syntax, although I honestly don't know if it's supported across all browsers (it should be):
#media print {
body {
background: #fff;
color: #000;
}
/* etc */
}
See the media part of the CSS2 standard at W3.
I had this exact same issue wanting to use the #media print tags without the need for a seperate print.css file. my question is here.
How to extract #media print from main.css file without need for seperate print.css file
You can achieve this by pointing your style link for media printing to the same css file you have your main layout in and adding #media print tags to it. I am not sure though if this is best practice.
<link href="css/main.min.css" media="screen" rel="stylesheet" />
<link href="css/main.min.css" media="print" rel="stylesheet" />
Now when I can have #media tags for print styling within the main css file. like below
.ContainerHeader {
align-items: center;
display: flex;
background-image: url(/images/header.png);
background-size: 100% 100%;
grid-area: ContainerHeader;
width: 100%;
height: 100%;
z-index: 99;
#media print {
.ContainerHeader{
display:none !important;
}
}
}