I'm trying to target a desktop with the screen size 1944 by 1080. I do this the normal way..
#media screen and (max-width: 1944px) and (max-height: 1080px) {
.about-section {
margin-top: 600px;
}
.container h3 {
position: relative;
top: -200px;
}
}
When I do this though, it affects my default resolution - 1440 by 900 -.
I'm confused does this mean I will have to rewrite code underneath this query for my default resolution?
So I want the header to be in a different position when viewed on a larger screen?
But I want the default header to not be affected by this?
I feel like I'm missing something, I know it cascades but surely the desktop query doesn't need to be at the top of the CSS file.
Any help would be greatly appreciated!
max-width means it will affect any browser with a screen lower than that value. If you want to target those dimensions and above only then use min-width instead.
You can use
#media screen and (max-width: 1944px) and (max-height: 1080px) and (min-width: 1441px) { }
To target your code to only > 1440px wide.
however you should probably just use
#media screen and (min-width: 1441px) { }
Related
I use Bootstrap 4 for making my website responsive. Bootstrap is a Mobile first. As I understand that's mean I should first write CSS for small screens and then add breakpoints for bigger screens.
That's what I have:
#main{
width: 100%;
}
#media (min-width: 576px) {
#main{
width: 90%;
}
#media (min-width: 768px) {
#main{
width: 80%;
}
}
When in Chrome I open console and click "Toggle Device Toolbar" and change screen width to 350px ("responsive"), it uses css for 'min-width 768 px' (not even for 576px) and makes #main width 80%.
Why is that happening and how to solve it? Thank you!
try to use #media screen and (min-width: XXXpx) { ... } instead of just #media (min-width: XXXpx)
You could use #media screen and (min-width: [...]px). Otherwise your code seems good.
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)
So I have a queries.css that currently takes in
#media only screen and (max-width: 1140px){
.row,
.hero-img{
width: 100%;
}
}
#media only screen and (max-width: 930px){
/* code */
}
But when the browser(chrome) is at width of 1023, it registers the code for the max-width:930px media query.
Does anyone know what the issue is here. I saw other posts related and they had said to use min-width and the meta tag, both of which I did and still causes the same problem .
Also when I try to write code into my 1140px max-width media query, the media query for 930px overrides that one.
Try this
#media only screen and (max-width: 100%){
.row,
.hero-img{
width: 100%;
}
}
#media only screen and (max-width: 100%){
/* code */
}
(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 have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}