So I'm not really good at css since I'm working more on the backend, I have two max-device-width where if the max is equal or less than to the value it will follow what style implemented but, I have this in css:
#media (max-device-width: 700px){
.main-news .mn-img img {
height: 15vh;
}
}
#media (max-device-width: 1024px) {
.main-news .mn-img img {
height: 25vh;
}
}
my problem is that when the device is already below 700px its still follow the 1024px style not on what i put on the 700px. How can I do this? that when it is now below on the 700px it will follow the 700px style not the 1024px style in css.
For 1024px, you need to do both min and max, so that it falls in a range. For example:
#media (min-device-width: 701px) and (max-device-width: 1024px) {
.main-news .mn-img img {
height: 25vh;
}
}
Note that you can't have the specified width overlap with one another. If you want to set a small screen with 700px max-width, then the min-width for a medium screen should start at 701px.
You can use media queries to specify a range, eg: #media (min-width: 30em) and (max-width: 80em) {... and you can combine them as you wish. So use min-width and max-with to specify ranges.
Look here for a complete primer on media queries: https://css-tricks.com/a-complete-guide-to-css-media-queries/
Related
I am using media queries, in the below order:
#media screen and (max-width: 1600px) and (max-height: 1024px) {
.img {
width: 150px;
}
}
#media screen and (max-width: 1600px) and (max-height: 900px) {
.img {
width: 100px;
}
}
When my screen resolution is 1600x1024, the 1600x900 rule kicks in. When my screen resolution is 1600x1024, the 1600x900 rule also kicks in. This is according to the Developer Tools -> Elements -> Styles tab in chrome. The other rule is always crossed out for some reason. If I switch the order of the rules, then the 1600x1024 rule always kicks in. Am I misunderstanding something?
The problem is that you are applying both rules at the same time eg. your max-width is identical in both rules. Also remember that max-width targets the specified number and below and that min-width targets the specified number and above.
Can you try the following example?
#media screen and (max-width: 1600px) and (max-height: 1024px) {
.img {
width: 150px;
}
#media screen and (max-height: 900px) {
.img {
width: 100px;
}
}
In this case we don't have the same pixels specified as max-width.
More to be found about Media Queries here: https://www.w3schools.com/CSS/css3_mediaqueries_ex.asp
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.)
I want to change some CSS properties of an element based upon the width of its parent element for responsive design.
For example,
The parent element will have a minimum width of 200px and will stretch to at max 500px regardless of the screen size/width. I want to set a fixed width to its children elements based on the width of its parent container.
I am looking for no Javascript solution for this. +1 if it can be somehow implemented using custom media query.
Please advise.
Try It Once
#media screen and (min-width: 200px) and (max-width: 499px) {
//styles here
}
#media screen and (min-width: 500px) and (max-width: 1024) {
//styles here
}
use Media query
#media only screen and (min-width : 200px) {
}
#media only screen and (min-width : 500px) {
}
I am using two media screen resolutions, and the problem is that, at 320px it takes margin-left: 16% which is intended for 480px screens. How can I separate these styles, so at 320px it takes what`s inside it and so on.
#media screen and (max-width: 320px) {
.signup-btn {margin-left: 4%;}
}
#media screen and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
Add min-width:
#media screen and (min-width: 321px) and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
If you are specifying only max-width then:
Place the default rules at the top
Place the rules that use max-width media queries afterwards, sorted by max-width descending:
/* rules for > 800px */
#media screen and (max-width: 800px) {
/* rules for 800px and less */
}
#media screen and (max-width: 480px) {
/* rules for 480px and less */
}
#media screen and (max-width: 320px) {
/* rules for 320px and less */
}
The sorting order is important. In the above example, if the screen is 320px wide then it satisfies all three conditions (max-width: 320px, max-width: 480px, max-width: 800px). In this case the rules declared last win; hence the rules are sorted that way.
Both styles apply. After all, the screen width of 100px is still less than 320px and also less than 480px. Both declarations have the same 'weight' and the second one therefor overrules the first, purely based on the order in which they are specified.
To overcome this, specify a min-width as well:
#media screen and (max-width: 320px) {
.signup-btn {margin-left: 4%;}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
or change the order:
#media screen and (max-width: 480px) {
.signup-btn {margin-left: 16%;}
}
#media screen and (max-width: 320px) {
.signup-btn {margin-left: 4%;}
}
Both should work and both have advantages and disadvantages. When adding a min-width, the declaration is more clear and less confusion can be made. The rule makes it very clear that it is only for 320+ and 480- resolutions.
The advantage of the other one is that it is less CSS, also you can set properties that apply to small screens (480-) in general, and only define extra overrules in the 320 version. This keeps the CSS smaller, but in my opinion also less clear.
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
}