I was working on a project and I encountered a problem.
I'll show you with the following demonstration example:
This is css code:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 600px) {
div {
background: blue;
}
}
#media only screen and (min-width: 601px) and (max-width: 1000px) {
div {
background: green;
}
}
#media only screen and (min-width: 1001px) {
div {
background: red;
}
}
So my div should be:
blue from 0px to 600px
green from 601px to 1000px
red from 1001px to ...
Instead it is:
blue from 0px to 600px
white at 601px
green from 602px to 1000px
white at 1001px
red from 1002px to ...
Why? It seems that (min-width:) is not inclusive.
So I tried:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 600px) {
div {
background: blue;
}
}
#media only screen and (min-width: 600px) and (max-width: 1000px) {
div {
background: green;
}
}
#media only screen and (min-width: 1000px) {
div {
background: red;
}
}
So my div should be:
blue from 0px to 600px
green from 601px to 1000px
red from 1001px to ...
Instead it is:
blue from 0px to 599px
green from 600px to 999px
red from 1000px to ...
Why? Now seems that (min-width:) is inclusive.
But If I try:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
#media only screen and (max-width: 601px) {
div {
background: blue;
}
}
#media only screen and (min-width: 601px) and (max-width: 1001px) {
div {
background: green;
}
}
#media only screen and (min-width: 1001px) {
div {
background: red;
}
}
Seems that (min-width:) is not inclusive again:
blue from 0px to 601px
green from 602px to 1001px
red from 1002px to ...
I am confused.
Both 'min' and 'max' prefixes are inclusive. Quoting the spec:
Most media features accept optional ‘min-’ or ‘max-’ prefixes to
express "greater or equal to" and "smaller or equal to" constraints.
The problem is a bit different: while you expect pixel dimensions to be integer, it's not always like that. This article describes the problem in quite a bit of detail:
You might think "Half a pixel? That's not possible", and for the most
part it's not. But if you use Ctrl+ or Ctrl- to change your browser
zoom then you'll often end up with non-integer viewport sizes, and
that non-integer viewport size can be used by the browser when working
out which media queries to apply to the page [...]
On Windows 7 and higher, there is a zoom level used by the operating
system for things like text and icons, and on larger screens (1920px
wide for example) this will automatically be set to a 125% zoom. But IE, Edge and Firefox all inherit this 125% value in their own way and end up applying it as browser zoom, creating the conditions for this bug to appear by default on most Windows machines with decent resolution screens in the past five or
six years.
Check the discussion opened on the similar issue in Bootstrap. A telling quote:
Chrome does not report decimal viewport widths even when zoomed, I
assume it rounds the values when applying media queries.
Quite convenient, I suppose.
In short, I'd drop either max-width or min-width here and go with overlapping rules, letting the latter rule to be a decider.
Related
i'm new to html and css and i've been having a few issues dealing with media queries.
Basically, i have a website that only "actually works" when its been visualizated in a 1920x1080 resolution, so i created a few media queries on my css to support other resolutions as well. I'm having a little bit of trouble on making a media querie to support the 1280x1024px resolution. When the browser is not on fullscreen, on windowed mod, none of my changes written in the css are applied. But when i go fullscreen, everything works just fine.
Also, i cant set 1280 width for this cuz it'll mess up my other media querie which was created for the 1280x768 resolution
Can anybody help me with this please?
Appreciate it.
This is how it looks on windowed mode, with none of my changes written in the CSS applied
This is how it looks on fullscreen, now, its actually doing what it's supposed to do
#media screen and (height:1024px) {
.white_round_background{
margin-left: 320px;
height: 170vh;
width: 160vw;
background-color: rgb(197, 183, 183);
}
.menunav {
left: 38%;
top: 4%;
}
.system_selection {
margin: 420px 0 0 0px;
height: 95px;
}
#logo_sliding_menu {
margin-top: 710px;
}
}
Hum... Just a guess at this point, but pay attention to that: the sequential order of css code matters.
You can have a lot of media-queries definitions, but they have to be in a specific order (from the highest to lowest). EG:
#media only screen and (max-heigth: 600px) {}
and only then
#media only screen and (max-width: 500px){}
ALSO, instead of just a specific height, maybe try to use the max-height property (which will be applied to devices having a resolution small than that height. Because aiming just one height of 1024px will not work on windows being 1023px height or less or 1025 or more...
.yourClass {
/* CSS applied to all devices above 1024px height */
}
#media only screen and (max-width: 1024px){
.yourClass {
/* CSS applied to all devices smaller than 1024px height */
}
}
#media only screen and (max-width: 955px){
.yourClass {
/* CSS applied to all devices smaller than 955px height */
}
}
#media only screen and (max-width: 500px){
.yourClass {
/* CSS applied to all devices smaller than 500px height */
}
}
/* And so on */
You can also play with min-height and max-height in the same query :
#media screen and (min-height: 400px) and (max-height: 900px)
{
.yourClass {
/* CSS applied to all devices
no less than 400px height and no more than 900px height */
}
}
Been fussing around with grid for a while trying to figure out if this is possible without much luck.
I'm working on a website in which everything is arranged within a strict background grid of 12px square, which is also used as the base font size, so 1rem = 12px. In order to maintain the vertical rhythm, I need to make sure that all elements, including padding and margin and borders, end up with widths and heights at some multiple of that base grid size.
For text content like paragraphs and headings this isn't super difficult, as long as the line heights are all set to 1rem, 2rem, 3rem, etc. For images, however, I struggle to see how to force it to a multiple of the grid size without a bit of javascript.
Not that I can't use javascript, but I don't really want to.
So say I have an <img> with an original size of 100px by 100px. Is it possible to restrict it to 96px (8rem) or 108px (9rem), or maybe place it within a larger container and enforce the restrictions on the container instead? grid-auto-rows: 1rem doesn't seem to do the job (since the element only ever creates 1 implicit track), and neither does grid-template-rows: repeat(auto-fill, 1rem).
You could use css #media queries to give your images specific sizes at specific breakpoints.
#media only screen and (max-width: 640px) {
img {
height: 6rem;
}
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
img {
height: 7rem;
}
}
#media only screen and (min-width: 801px) and (max-width: 960px) {
img {
height: 8rem;
}
}
#media only screen and (min-width: 961px) and (max-width: 1024px) {
img {
height: 9rem;
}
}
#media only screen and (min-width: 1025px) and (max-width: 1200px) {
img {
height: 10rem;
}
}
#media only screen and (min-width: 1201px) {
img {
height: 11rem;
}
}
I am trying to mix both min width and max width media queries like so:
#media only screen and (max-width: 768px) {
.navibar li a {
font-size: 8px !important;
}
}
#media only screen and (max-width: 1300px) {
.navibar li a {
font-size: 2px !important;
}
}
#media only screen and (min-width: 1301px) {
.navibar li a {
font-size: 1rem !important;
}
}
When hitting the 1300px the font size changes to 2px, but never hits the 768px media query. Why is this?
Codepen
I think why not? You specific the .navibar li a when max-width: 1300px is 2px, so form 0 to 1300px, they will have that value = 2px.
And since you write the rule of max-width: 1300px after the rule of max-width: 768px, so it always be 2px too even if you have less than 768px width. You should relocate the rule of max-width: 768px after the 1300 one and it will work just fine.
And a side note, try not use !important in your code, it a bad practice. Find other way(s) to override the rule(s), !important should only use to override inline style, which is a bad practice too if you write style like that.
I'm trying to understand CSS a bit and I'm currently somewhat stuck with #media rules and screen sizes. I want to change the background color depending on the current resolution. Here's the CSS:
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 10px;
background-color: brown;
}
#media screen and (max-width: 9999px) {
section {
background-color: red;
}
}
#media screen and (max-width: 1000px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Just using a simple
<section>
bla
</section>
HTML code. Here's a w3schools tryit link since you can easily resize your viewport.
https://www.w3schools.com/code/tryit.asp?filename=FDW9EOFLTCX6
However, it does not work like I'd want it to.
For the yellow background (< 500px), it stays yellow until 500 included.
For the blue background (>= 500px && < 1000px), it stays blue until 1000 included.
For both cases, the color jump occurs at 501 and 1001 respectively. If I adjust the width values to 499 and 999 respectively, however, the color jumps suddenly happen at 499 and 999 instead.
It seems I cannot understand how to get the change to happen at exactly 500 and 1000. Or is it just a problem with the editor I posted?
It depends where you want the 'jump' to happen, but assuming you want the background to be yellow at 500px and blue between 501px and 999px, you can simply use the following:
#media screen and (min-width: 501px) and (max-width: 999px) {
section {
background-color: blue;
}
}
#media screen and (max-width: 500px) {
section {
background-color: yellow;
}
}
Don't forget that you can also use min-width as well as max-width, and that media queries will always take priority sequentially from top to bottom.
Hope this helps!
i thing the perfect responsive media query tag is this one
#media (min-width:1600px) and (max-width:3600px) {
.model-student-gallery .modal-lg {
width: 60%;
}
}
you want to wright to css according to media screen .
Try it it's helpful for creating responsive layout .
The Goal
The goal is to be make the grid system boxes amount per row change based on screen size. Here is an example
Screen Size Boxes Percent Width
1250px 3 33.3
750px 2 50
500px 1 100
Current Progress
I have created the grid system and the media queries
/* Max Width 1250px */
#media screen and (max-width: 1250px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media screen and (max-width: 750px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
The Problem
I current have the media queries that work at 750px and 500px however it skips the 1250px. Not sure what the difference between the 750px and the 1250px? Why it not working?
JSFiddle - https://jsfiddle.net/6k2Lkm2f/1/
I've had a similar problem before.
You should use both min-width and max-width to set lower and upper bounds respectively.
Also your first two are redundant. Both give the .boxes class a width of 50%. It would be better to combine them into one, that serves both viewpoints
/* Max Width 1250px */
#media only screen and (min-width: 501px) and (max-width: 1250px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Using the above syntax is a great way to prevent confusion.
Edit: Media queries only work on ie9 and above. If you are using an older browser, the above will NOT work.
Second Edit: It looks like in media queries you need to add only before the type. For example
#media only screen instead of #media screen