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
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/
Guys how to make this kind of things in creating a website
This is the full picture:
When I scale down the browser it will turn out like this
What you're looking for are #media rules. With #media rules you can not only apply different designs for different output devices (screen, printer, braille, ...), you can also specify different designs for different screen sizes.
Example:
p {
font-size: 120%;
}
#media (max-width: 1000px) {
p {
font-size: 110%;
}
}
#media (max-width: 600px) {
p {
font-size: 100%;
}
}
Other possible properties are max-height, min-width and min-height.
The rules can be combined:
#media screen and (max-width: 600px) and (min-height: 800px) {}
Media Queries - MDN
I am coding a site with AngularJS and SCSS. I am in the mobile-phase of development and I quickly discovered (for this project) that I needed a way to target multiple breakpoints using a #media query. So I found via this SO answer and this CSS Tricks Post as well as multiple other answers on SO. Then I implemented the solutions I found into a test-case, see snippet below for the test.
main {
background-color: grey;
height: 100%;
min-height: 1000px;
#media (max-width: 992px) {
background-color: red
}
#media (max-width: 768px) {
background-color: lightcoral
}
#media (max-width: 992px), (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
#media (max-width: 768px),
(max-width: 768px) and (orientation: landscape) {
background-color: lightblue;
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main>
But I haven't been able to get it to work. What I am trying to do, ultimately, is have styles that are applied when the user is in landscape on a tablet, or phone. However, I don't know if I am doing it right, or using the or operator correctly.
It plain doesn't work, well, the first statement (for example: (max-width: 992px)) works, but the second one doesn't evaluate to true. According to Mozilla:
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. --- Mozilla Documentation
Even if I break the code into two separate media queries:
#media (max-width: 992px) {
background-color: lightgreen;
}
#media (max-width: 992px) and (orientation: landscape) {
background-color: lightgreen;
}
It still doesn't work. So I don't know if I am targeting the wrong width (when in landscape) or what I am doing wrong. Can any other Front-End developers out there tell me why my comma seperated media queries aren't working?
EDIT: Here is the native SCSS code:
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
#media
(max-width: map_get($grid-breakpoints, 'lg')),
(max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){
background-color: lightgreen;
}
#media
(max-width: map_get($grid-breakpoints, 'md')),
(max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){
background-color: lightblue;
}
#media
(max-width: map_get($grid-breakpoints, 'sm')),
(max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){
background-color: lightcoral;
}
}
EDIT: Per the recommendation of #Godwin, I simplified my #media queries to this:
main {
background-color: $mono-90;
height: 100%;
min-height: 1000px;
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
// Reset the min-height here, because we no longer have the sticky search bar.
min-height: 450px;
}
#media screen and (max-width: map_get($grid-breakpoints, 'lg')) {
background-color: lightgreen;
}
#media screen and (max-width: map_get($grid-breakpoints, 'md')) {
background-color: lightblue;
}
#media screen and (max-width: map_get($grid-breakpoints, 'sm')) {
background-color: lightcoral;
}
}
However, it doesn't work on iPad Landscape (1024x768). I don't want it to show on Laptops, but do want it to show on iPads in Landscape position.
However, it doesn't work on iPad Landscape (1024x768). I don't want it to show on Laptops, but do want it to show on iPads in Landscape position.
I'm not sure what you're defining by it since you're not hiding anything in your examples so I'm gonna refer to:
What I am trying to do, ultimately, is have styles that are applied when the user is in landscape on a tablet, or phone.
Orientation on MDM is defined as the following:
This value does not correspond to actual device orientation.
It just indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.
You said your iPad in landscape has a resolution of 1024x768, so to target an iPad or a phone in landscape mode, you can set a media query targeting all devices having a maximum width of 1024px and being in landscape mode (the display is wider than it is tall):
main {
background-color: grey;
height: 100%;
min-height: 1000px;
width: 100%;
#media screen and (max-width: 1024px) and (orientation: landscape) {
background-color: lightblue;
}
}
You can check an example on this codepen.
If your viewport has a width greater than 1024px, the main element will be grey no matter what.
If you resize your browser window to have a viewport with a width equal or less than 1024px, and have a viewport considered in landscape (the display is wider than it is tall), for example an iPad in landscape mode (1024x768), the media query will trigger and apply a blue background:
If you resize your browser window to still have a viewport with a with equal or less than 1024px but have an height greater than your width, the viewport is no longer considered to be in landscape mode but switch to portrait mode. At this time, the media query is no longer be triggered and we fallback to a grey element:
So regarding your question, the example is a media query to apply styles to the user using a tablet or phone in landscape mode.
Here is a solution .Hope this will work for you
main {
background-color: grey;
height: 100%;
min-height: 1000px;
}
#media (max-width: 992px) and (orientation:portrait) {
main{
background-color: red
}
}
#media (max-width: 768px) and (orientation:portrait) {
main{
background-color: lightcoral
}
}
#media (max-width: 992px) and (orientation: landscape) {
main{
background-color: lightgreen;
}
}
#media (max-width: 768px) and (orientation: landscape) {
main{
background-color: lightblue;
min-height: 450px;
}
}
<main>
<h1>Page Title</h1>
<h2>Some Descriptive information</h2>
<div>Content</div>
</main>
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 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...