CSS styling for specific maximum width at specific maximum aspect ratio - css

I was trying to style for a screen that is less than 992px and aspect ratio less than 1. Here is what I tried. It is not working. Is it possible to do something like this in CSS? Here is what I tried.
#media screen
and (max-width: 992px)
and (max-aspect-ratio: 1){
.classStyle{
display: flex;
flex-direction: column;
}
}


You can use like this
#media (aspect-ratio: 1/1) {
div {
background: red;
}
}
Also can learn more here


I think this is what you want..
#media screen and (max-width: 992px) and (aspect-ratio: 1/1){
body{
display: flex;
flex-direction: column;
}
}

Related

I am unable to style a page using max-width media query

I am practicing to code. Trying to make the grubhub webpage. Having trouble with the max-width media query.
Below is my code
#media (max-width: 800px) {
div.displayFood h2 {
font-size: 3rem;
}
.order {
display: flex;
flex-direction: column-reverse;
}
}
I understood that it's a lot of codes. Appreciate any help.

You have a missed close bracket on class .hide
This is the reason why nothing works after this class
.hide {
display: none;
} /*<---- this is missing*/
#media (min-width: 800px) {
.hero {
flex-wrap: nowrap;
}
}

Media Query for device width < 800px would be#media only screen and (max-width: 800px) {...}

How to hide a div between two sizes in CSS

I stuck to hide div between two screen size. like I want to hide div between screen sizes 550px - 910px with the following media query.
#media only screen and (min-width: 550px) - (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}

use the following syntax to do it:
#media (min-width: 550px) and (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}

#media not working with width less than 1024px

I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">

Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.

CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here

css media print check legal paper

How to check in if the height age is equal heigth paper Legal ?
My code didn't work
#media and (min-height: 13in) {
#media print{
#divbr{
display: block;
}
}
}

this is the solution :
#divbr{
display: none;
}
#media (min-height: 13in){
#media print{
#divbr{
display: block;
}
}
}

Why are some #media queries stacked like this in Bootstrap CSS files?

Why are some #media queries stacked like this? Wouldn't it be easier to just keep this kind of stuff all together?
I mean I get why you'd do it based on grouping in your css, but this seems redundant since they are literally inline of each other?
#media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
#media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
#media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}

Resources