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) {...
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>
Hi I'm trying to make my site responsive. Now I have a media query that handles a certain screen size of devices but a different styling when viewing via web. It works just fine in chrome, safari and opera. But when trying in mozilla it seems that my media query is being executed eventhough I'm accessing it via desktop. Is there anything that I'm missing? Below is my media query
.my-target-class {
display: inline;
}
#media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){
.my-target-class {
display: block;
}
}
As you can see I'm targetting a clas and display is change if its being viewed via mobile. But upon viewing on mozilla its running the #media screen query and applying ng display: block on the class. Any idea or fix for this? Would appreciate if explanation on why its behaving like this
As you can see on the lower right part of the screenshot it's applying the css styling meant for mobile. Eventhough I'm acessing it via a desktop browser. I assume that if I place #media only screen this will only be applied when viewing on mobile. But it seems firefox is behaving differently
Don't put outside your code. You have to wrap to your screen size for desktop also like this
#media screen and (min-device-width: 300px) and (max-device-width: 800px){
.my-target-class {
display: block;
}
}
#media screen and (min-device-width: 801px) {
.my-target-class {
display: inline;
}
}
(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.
I am trying to hide a piece of div element on a desktop version of a website and display it on a mobile. However using media query does not allow me . Do you know what might cause the problem? Below is my code:
#media all and(min-device-width: 768px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and(min-device-width: 321px) and (max-device-width: 767px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and(max-device-width: 320px){
.Products{display:none;}
.Products-Mobile{display:block;}
.Benefits{ display:block;}
}
And my html:
<!-- This class will be displayed on the desktop version of the site and will be hidden on the mobile -->
<div class="Products">
Desktop test
</div>
<!-- This class will be displayed on the desktop version of the site and will be hidden on the mobile -->
<div class="Products-Mobile">this is mobile test</div>
<!-- This class will be displayed on the mobile and the desktop version of the site -->
<div cass="Benefits">
content
</div>
It's very simple... Just add a space between and and (min...) ;)
Edit your media queries to the following:
#media all and (min-width: 768px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and (min-width: 321px) and (max-width: 767px){
.Products{display:block;}
.Products-Mobile{display:none;}
.Benefits{ display:block;}
}
#media all and (max-width: 320px){
.Products{display:none;}
.Products-Mobile{display:block;}
.Benefits{ display:block;}
}
Working jsfiddle. Removed -device- from your media queries.
EDIT
To answer questions regarding the use of -device- in media queries - this has been deprecated in Media Queries Level 4. From W3C:
To query for the size of the viewport (or the page box on page media),
the width, height and aspect-ratio media features should be used,
rather than device-width, device-height and device-aspect-ratio, which
refer to the physical size of the the device regardless of how much
space is available for the document being laid out. The device-* media
features are also sometimes used as a proxy to detect mobile devices.
Instead, authors should use media features that better represent the
aspect of the device that they are attempting to style against.
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.