I tried to declare an alternative formatting for mobile devices but the code after the opening bracket is not taken into account and I realised that the closing bracket isn't even taken into account (the color formatting is different). I declared #media screen and (max-width: 800px) and in the html code I have .
I don't know what I am doing wrong.
#media screen and (max-width: 800px){
h2 {
font-size: 24px;
}
}
I am using coffeecup just to do a simple website and the code appears as such:
Code in CoffeeCup
In the picture it shows that the closing bracket is not formatted properly.
Thanks for the help!
Your #media has no problems, it´s not highlighted because the last closing bracket is a second level bracket, it´s ok so. have you another #media in your code?
Related
I'm really new in coding and I created my first page ever with html and css. The thing is, I'm struggling with making the page responsive.
I know that I have to add the #media query and that, but, once I add it, I don't know which parametres should I change (text, etc) and I can't see how the result would be since I'm using a computer.
I would like a clear explanation or some examples because I've been looking up on Internet and I'm still very confused.
https://codepen.io/jomby/pen/NWvVNpQ
NW vVN p Q
This is the link to my page. In this case, when I see the page on the phone, the text stretches a lot and also the gallery.
Maybe you could tell me how would you make this example responsive so that I can learn that way.
Thank you very much in advance, for your time and patience!
The way you work with Media Queries is by:
Decide what to do first, mobile or desktop
After you do it, start by coding your webpage and once you finish you start adjusting your screensize and see what elements get misconfigured.
Here are some patterns you can follow, however you're not enclosed to configure your settings in these sizes:
#media only screen and (max-width: 1200px){
/*Tablets [601px -> 1200px]*/
}
#media only screen and (max-width: 600px){
/*Big smartphones [426px -> 600px]*/
}
#media only screen and (max-width: 425px){
/*Small smartphones [325px -> 425px]*/
}
With respect to the following link:
What is the difference between "screen" and "only screen" in media queries?
"only" is used in media-query so that old browsers, which do not support media query should read only (and as hyphenated or alphabets are not present, but a space - they will stop further reading) and the rest of the code will not be applied (as 'only' is not a device type).
In conclusion, we should always write "only" as good practice and our code will be like this:
#media only screen and (min-width: 300px) and (max-width: 800px) { ... }
But, with that logic and applying only to prevent old browsers from messing up code whhile they don't support media query and otherwise screen keyword after being read - the following CSS will be applied globally (see the link above).
Now, what if I want to write certain media query for all platforms, viz. https://www.w3.org/TR/CSS2/media.html
What should my correct code be now:
#media only all and (min-width: 300px) and (max-width: 500px) { ... }
OR
#media all and (min-width: 300px) and (max-width: 500px) { ... }
Remember, all is a device-type keyword, so with the same logic, older-browsers will (if only keyword is not used), whatever CSS code is present will be applied globally.
On the other hand I have never seen a code such as only all so what I expect is to be syntactically-wrong and CSS will not run.
Now, can someone provide me solution with reason, which of the 2 options is correct?
Since all browsers right now support media query you can just use #media and it will work without any problem. Also bootstrap uses #meida which is something that works on all browsers right now.
#media (min-width: 300px) and (max-width: 500px) { ... }
Therefore you just need to use #media and you will get the same result as if you used
#media only screen and (min-width: 300px) and (max-width: 500px) { ... }
Please refer to this link am sure it will be helpful MDN #media
Also, this link is extremely useful MDN media query
I'm creating a small react app, and have run into an issue with the css.
My css is laid out in this general format
<-->
Shared classes/properties{}
<--->
<--->
#media only screen and (max-width: 991px){}
#media only screen and (max-width: 480px){}
<--->
The issue is: When looking at a phone (e.g. iPhone X), it is using the classes from max-width:991px instead of max-width:480px.
The expected behaviour is:
max-width:480 should cover 0px-480px
max-width:991 should cover 481px-991px
However currently, 0px-991px is only uses classes from max-width:991.
I've tried (min-width: 0px) and (max-width: 480px) and its counterpart, but it's still not behaving as expected.
I'm sure there's a gap in my understanding - can someone point out what I'm doing wrong?
You didn't post much code, but from what you posted, I would say you need to add the word "and" between "only screen" and "(max-width: ...)" in both lines:
#media only screen and (max-width: 991px){
...
}
#media only screen and (max-width: 480px){
...
}
From MDN:
The and operator is used for combining multiple media features
together into a single media query, requiring each chained feature to
return true in order for the query to be true. It is also used for
joining media features with media types.
--> You are combining screen and a max-width here. Using "and" combines both.
I am working on a legacy site for someone where a media query does not seem to be having an effect on 1 out of 3 classes. The classes affected are .free-ship, .wholesale, .chronicles
The css for these on standard screen sizes is:
/* Shipping section - Home page */
.free-ship, .wholesale, .chronicles {
text-align:center;
height:180px;
width:30%;
}
.chronicles {
margin-right:10px;
}
.chronicles a, .wholesale a {
color:#fff;
}
Now I have in place the following css as media queries:
/* Media Queries */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
width:100%!important;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
height:230px;
}
}
The problem is, the media query does not seem to apply to the .wholesale class and I can't figure out why? Again, this is not my site, I am just trying to help out. The site is here (removed for privacy). The code refers to the black/grey boxes near the middle of the page.
Any suggestions would be most welcome. I've checked the custom.css file with css lint and this hasn't shown any errors so i'm looking for where I should look next?
Thank you in advance.
D
On the live site, it looks like the query isn't targeting ".wholesale," but instead it's targeting an older class called ".world-ship".
You may have changed the class name and it didn't get changed in the media query, or else it hasn't been pushed to live.
Media Query with ".world-ship" class
Ok...The issue was a complete oversight on my part, I forgot the site was cached through a CDN, so even though i've updated the css file and cleared the site cache many times, the changes were not taking affect. I've purged the cache on the CDN and its updated.
Clearly a wood for the tree's problem. Thanks for the answers and comments.
I've started using Sass and took my old css code and worked with it. For compiling I used prepros which has the option to compress CSS which saves some space.
The Problem I have is that when the SCSS code gets compiled into 1 line at the end the media query is empty
This is what my SCSS looks like, as an example
#media all and (max-width: 900px) {
body {
background-color: red; }
}
and this is what gets compiled
body{background-color:blue;}#media all and (max-width: 900px){}
I'm not 100% sure with spaces but you get the point I think, it's in 1 line of code.
When putting the thing into a new line it get's correctly highlighted in sublime text aswell.
Is there a way to still compress my css but get media queries to work?
Edit: I checked and the output looks exactly like this
#media all and (max-width: 900px){}
So it's not a bug with a missing space behind "and"
Edit2: Still not working, this is the exact code in my sublime text which doesn't work in the browser.
.overlay{-webkit-filter:blur(0);opacity:1;transition:all 0.5s ease-in-out}#media all and (max-width: 900px){}
Sublime doesn't think its right either http://i.imgur.com/9lTP3ux.png
Where did my Code go? why is the compressed CSS missing the content of the media query
I was facing this problem too a few days ago, I don't think it was the case before the prepros update, but I have not found a way to make it work, unless I place the media query within the selector instead of outside.
So if you actually do it like:
body{
#media all and (max-width: 900px){
background-color: red;
}
}
Prepros shoudl compile it correctly. This is the way SASS intends the media queries to work, but since normal CSS is basically valid SCSS, I think prepros really should start supporting it the other way round again.
body{
background-color:red;
#media all and (max-width:900px)
{
background-color:blue;
}
}