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...
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 in component's styles, but when I resize the window, nothing is happens
#media query screen and (max-width: 768px) {
/* Here are some changes*/
}
It doesn't work at all, do I need to load some modules or how to fix it. Any help appreciate.
Use following syntax. This is the correct syntax for media query.
Hope this helps!!
#media only screen and (max-width: 768px) {
/* Here are some changes*/
}
You might want to write different media queries for each breakpoint. Also, the syntax is like below
/* Tablet*/
#media screen and (max-width: 768px) {
/* Here are some changes*/
}
/* Mobile */
#media screen and (max-width: 320px) {
/* Here are some changes*/
}
remove query
#media screen and (max-width: 768px)
{
/* Here are some changes*/
}
A bit simpler way,
#media (max-width: 768px) {
/* Here are some changes*/
}
I am new to #media screen so please be gentile.
I do not have a fluid setup but rather a fixed setup for 3 different device setups.
Mobile = max-width 500px.
Tablet = max-width 740px.
Laptop/desktop/desktop hd = width 980px.
--
So am I correct is saying the following:
#media (max-width: 500px) { }
#media (max-width: 740px) { }
#media (min-width: 741px) { }
You need to have the smallest screen-width last, like this:
#media (min-width: 741px) { }
#media (max-width: 740px) { }
#media (max-width: 500px) { }
As the CSS reads from the top to the bottom, then with your max-width: 740px will overlap, as 320px is still less than 740px.
You could also set a min-width:
#media (max-width: 500px) { }
#media (min-width:501px) and (max-width: 740px) { }
#media (min-width: 741px) { }
Then you can place them as you want.
EDIT:
This is actually better:
[ CSS For 741px and above here ]
#media (max-width: 740px) { }
#media (max-width: 500px) { }
This way, you just need to fix widths, font-sizes and such in the media-queries, and you don't need to write background-colors and font-colors if they should stay the same.
I need help to change % width on my category images within my site whenever my screen gets smaller. Or the images will get super small on smaller resolution.
What I want to achieve is something like this: http://www.twitch.tv/directory
I've tried to do this by using this code. (but it isnt working)
.category-list-item {
float: left;
#media screen and (max-width: 769px) {width: 20%;};
#media screen and (min-width: 480px) {width: 25%;};
#media screen and (max-width: 480px) {width: 33.33%;};
padding: 1em;
Would be super greatful for any help!
/ Martin
As rekire says, you messed the syntax, and you need to set full rules.
Also, there shouldn't be semicolons after the rules.
And lastly, your 2 final rules cover all the posibilities, width being greater or smaller than 480px, so the first rule will never apply.
I have changed it so that you have an style for lower res, another for higher res, and the default applied in between
.category-list-item {
background-color:red;
}
#media screen and (min-width: 769px) {
.category-list-item { background-color: green; }
}
#media screen and (max-width: 480px) {
.category-list-item { background-color: blue; }
}
<div class="category-list-item">Test</div>
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.