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.
Related
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/
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 set a width of 70% on my , which looks ok, but for mobile screens it wouldn't hurt if the width was higher, say 90%.
So my question is... Is there a way to make the site's width higher percentage if the screen is smaller?
You should use media query for that:
div {
width:70%;
}
#media only screen and (max-width: 500px) {
div {
width:90%;
}
}
Get a head start on media queries
Or use a framework like bootstrap
Using bootstrap, you can achieve that using:
<div class="col-md-10 col-md-offset-1 col-xs-12">blah blah</div>
A little light reading on media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.content {
width: 70%;
}
#media (max-width: 600px) {
.content {
width: 90%;
}
}
You can combine your size media query with a resolution media query:
#media (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browser */
(max-width: 600px) and (min-resolution: 2dppx), /* The standard way */
(max-width: 600px) and (min-resolution: 192dpi) /* dppx fallback */
I am trying to figure out if there should be an order (Increasing or decreasing) while giving #media in the css.
I am using some media with min-width, then if i write it in following order then what difference does it make with if i place it in increasing or decreasing order.
#media only screen and (min-width: 1000px) {
}
#media only screen and (min-width: 1365px) {
}
#media only screen and (min-width: 1280px) {
}
#media only screen and (min-width: 900px) {
}
#media only screen and (min-width: 1150px) {
}
If you are using min-width, then start with the minimum. because if browser gets two css condition suitable, it picks the later one. for example in following case-
#media only screen and (min-width: 1280px) {
}
#media only screen and (min-width: 900px) {
}
now if browser width is more than 1280, both condition are suitable for it. in this case it will pick second condition, i.e. (min-width: 900px). while it must choose (min-width: 1280px).
So always keep its order in mind.
Also same apply for the max-width condition. also give css condition with max-width in decreasing order. so you got the following -
for min-width
#media only screen and (min-width: 900px) {
}
#media only screen and (min-width: 1150px) {
}
#media only screen and (min-width: 1280px) {
}
for max-width
#media only screen and (max-width: 1280px) {
}
#media only screen and (max-width: 1150px) {
}
#media only screen and (max-width: 900px) {
}
I am creating a mobile application in which I am getting some error.
here my core style is for desktop:
.abc{
width:1001px;
}
#media only screen and (max-width : 320px) {
.abc{
width:320px!important;
}
}
#media only screen and (max-width : 480px) {
.abc{
width:480px!important;
}
}
Here from the above styles only the style of 480px is applying for both the 320px and 480px.
Is there any alternate suggestion to come over this problem.
This is because max-width:480px; still targets 320px too. Change the last one to:
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc {
width: 480px !important;
}
}
and this will stop that query affecting anything below 321px.
It doesn't look like you need !important This fix has nothing to do with that so I would remove that if I were you, it may mess things up in the future
An alternative solution would be to move the 320px query below the 480px. They both have the same specificity so the one that comes last in the cascade would take precedence.
set a min-width
.abc {
width: 1001px;
}
#media only screen and (max-width: 320px) {
.abc {
width: 320px;
}
}
/* set a min-width here, so these rules don't apply for screens smaller than 321px */
#media only screen and (min-width: 321px) and (max-width: 480px) {
.abc{
width: 480px;
}
}
If I'm right you should be able to remove the !important syntax too...