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.
Related
I have a hero class where I have:
.hero{padding: 90px 30px}
I have this, but when there is a bigger screen, I want to remove the padding completely so I tried:
#media screen and (min-width: 1150px) {
.hero{
padding: none !important;
}
}
I tried this but it came back with "invalid property value". Any suggestions?
You could use padding:0. Your attempt is not working because none is not a valid padding. A valid one is either a <length> or a <percentage>.
#media screen and (min-width: 1150px) {
.hero {
padding: 0;
}
}
I'm stuck with this issue that ocured to me, My media query was working well as it should be, but then in a moment it just stopped working, and I published a question about this issue but it endedup that the max-width of media query is not workin and if I set min-width it works.
Here is my code:
#media only screen and (max-width: 760px) and (max-device-width: 760px) {
.conainerInp {
display: block !important;
}
.contInputs,
.contInputs3 {
flex: 100% !important;
max-width: 100% !important;
margin-bottom: 10px;
width: 100%;
}
.last {
margin-bottom: 60px;
}
.contenido {
display: flex !important;
flex-wrap: wrap !important;
}
.contenedoresGen {
max-width: 100% !important;
width: 100% !important;
}
::ng-deep .mat-horizontal-content-container {
padding: 0 !important;
}
::ng-deep.mat-horizontal-stepper-content {
overflow: auto !important;
}
::ng-deep .mat-tab-label-container {
overflow-x: auto !important;
}
}
And also I do have the meta tag on the index header, I'm working with angular
<meta name="viewport" content="width=device-width, initial-scale=1">
When a media query has two rules with the and joining them both rules, it means for the media query to pass, both rules need to be satisfied.
In the rules stated, you want a media query to be applied when the screen's maximum width and the device's maximum width are the same, i.e., the screen should be less than or equal to 760px and the device you are viewing on should be less than or equal to 760px in size.
This is a constraint that can only happen if you are using a device that is below the 760px mark. As such, you cannot see the media query change on your laptop unless you simulate it in your dev tool Check this simulated image for more information
The reason the min-width and/or min-device-width work is because you have asked your query to check and fulfill a rule when your screen or device is greater than or equal to 760px. i.e
#media only screen and (min-width: 760px) and (max-device-width: 760px){} will work if your device screen width is greater than or equals 760px and your device width is less than or equals 760px.
#media only screen and (max-width: 760px) and (min-device-width: 760px){} will work if your device screen width is less than or equals 760px and the device width is greater than or equals 760px
As a result, I will implore you to check the conditions in your media query and adjust based on the device.
I hope this helps
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 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.