I have this simple media queries:
#media screen and (min-width: 1440px) and (max-width: 1600px) {
body {
font-size: 14px;
}
}
But this just doesn't work. My screen resolution is 1600x900, so it should work, I think. What the hell is wrong here? I put this on the end of .css file, I added
<meta name="viewport" content="width=device-width,initial-scale=1.0">
to the HTML file... I don't know what else should i do to make this working.
min-width and max-width refer to the width of the window, not of the screen. #media screen means that the styles apply to the "screen" medium (as opposed to the "print" medium for example).
To target the resolution, you can use min-resolution and max-resolution.
Related
I have been doing a lot of research for days already on why this problem persists. So here it goes.
I have applied CSS media queries for smartphones. It works perfectly fine in the browser device simulator and the actual smartphone itself. But my client checks it differently, he resizes the browser. Unfortunately, the CSS media queries do not apply to the browser which breaks the entire layout.
My client insists to fix the breaks in browser resize but if I do this, it breaks the smartphone layout.
I have already added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And this is how I declare my queries:
#media only screen and (max-width: 767px)
{
...
}
#media only screen and (max-width: 360px)
{
...
}
Now, to fix the client's demand I have added something like this
#media only screen and (max-device-width: 767px) to target specifically the smartphones.
For me, this isn't an efficient fix to what's happening. I just want to know where did it all go wrong and why the browser is not reading all my CSS media queries. I am hoping for an answer soon.
You must have some other error in your CSS or HTML. If I add your mediaqueries to a normal CSS file it get's used by the browser if you resize the browser.
See the following snippet to see how the background color of the page changes based on width.
body {
background-color: blue;
}
#media only screen and (max-width: 767px) {
body {
background-color: green;
}
}
#media only screen and (max-width: 360px) {
body {
background-color: pink;
}
}
<p> TEST CONTENT </p>
I have problem with media queries (first time use).
http://swiatek.org.pl/-2/
They are working when I'm changing browser window, but when I'm looking inspect toggle device toolbar on chrome media queries doesnt work :(.
CSS: http://swiatek.org.pl/-2/main.css
replace
#media screen and (max-width: 1000px)
with
#media only screen and (max-width: 1000px)
and replace
#media screen and (max-width: 880px)
with
#media only screen and (max-width: 880px)
add the word "only" when declaring media screens.
#media only screen and (max-width: 880px) {
#first header{
font-size: 55px;
}
}
You can learn more about it here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You are missing the meta tag, add this in your header.
<meta name="viewport" content="width=device-width, initial-scale=1">
I want to style my HTML differently according to different media queries. For example, I want my HTML to display in a way when it is viewed on a browser with a width of 1024px or less, and in another way if it is viewed on a browser with a landscape orientation (like when a phone is flipped over). Here is what I tried doing;
#media (max-width: 1024px) {
h1{
margin-top: 10px;
}
}
#media (orientation: landscape) {
h1{
margin-top: 20px;
}
}
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
But unfortunately it didn't work. The problem was that when I loaded the site on a landscape device the code did not change.
Note: My problem is not that the media queries are completely not functioning. It is, however that I am being unable to use more than two media queries.
Thank you.
For a beginning, try to use this instead of what you have:
#media screen and (max-width: 1024px) {...
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
With twitter bootstrap i applied
#media only screen and (min-width : 768px){
}
but this media query is working on all other width values too, such as 992px & 1200px.
Any solution?
1)Please check whether you have included the meta tag in the head section of your HTML document as
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If this line is not present then none of your media query would work.
2) If you override bootstrap break points in your style sheet make sure your stylesheet is linked to your application properly.
3)understanding how min-width and max-width works will help you. If you are trying some wrong combinations, results may be weird :)
#media (min-width:480px) {}
The styles inside this media query would apply only if your viewport is minimum 480px or wider than that.
#media (max-width:767px){}
The styles inside this media query would apply to your viewport only upto 767px. For any resolution higher than 767px our styles won't be applied.
#media screen
This tells that this particular styles are only applicable to screen and not for print,projection or handheld. So #media screen or #media only screen wouldn't harm your media queries much.
These are some of my tips to troubleshoot media queries. Hope this would help you resolve your issue.
Change media Query to
#media screen and (min-width: 768px) and (max-width: 900px) {
}
Or any size between you want.
For more Details Refer This link.
You can use max-width. when screen regulation is maximum 992px, then it will work.
#media only screen and (max-width : 992px){
/*your styles for Tab device*/
}
You can use max-width. when screen regulation is maximum 767px, then it will work.
#media only screen and (max-width : 767px){
/*your styles for mobile device*/
}
Got it working now.
Mobile with max only then parts from to and above 1200 is reading default.
#media (max-width: 640px) {
}
#media (min-width:640px) and (max-width: 768px) {
}
#media (min-width: 768px) and (max-width:992px){
}
#media (min-width: 992px) and (max-width:1200px) {
}
i hope this may work for you
Please Define it in your style.css not in bootstrap
#media (min-width:768px)
{
}