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) {...}
Related
I'm sorry i know it's been asked before but i just can't figure why it doesn't work!
I have the meta tag viewport in the head
I have a display:none icon (bars) at wide viewports (i started from there) and it should appear at smaller size when the menu disappears. (menu disappearing works)
I've set it to display:block
My SCSS:
.fa-bars {
display: none;
}
#media screen and (max-width: 600px) {
.container {
.fa-bars {
display: block;
}
}
}
But it doesn't work i don't know why
tried to select it with just *i*, with the class, i don't know please send help.
In your media query, this won't work:
.container{
.fa-bars{
display: block;
}
}
It should either be:
.container .fa-bars {
display:block;
}
... if it's important that the .fa-bars is in .containers.
Otherwise this will be fine:
.fa-bars {
display:block;
}
you need SCSS for nesting blocks,
trying doing it like this:
.fa-bars{
display: none;
}
#media screen and (max-width:600px){
.container.fa-bars{
display: block;
}
Enclose both in media queries and correct your css syntax. try this:
#media screen and (min-width:601px){
.fa-bars{
display: none;
}
}
#media screen and (max-width:600px){
.container .fa-bars{
display: block;
}
}
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;
}
}
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? 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;
}
}
I have a problem when I use media query in css3: without screen, meida query doesn't work.
Here is code:
.side-menu {
position: fixed;
...
display: none;
margin-right: 0;
#media screen and (min-width: #screen-xs) {
display: block;
}
#media and (min-width: #screen-md) {
right: 8.1%;
}
}
Problem: the first media query works and the seconds doesn't. If I remove the screen and the first doesn't work either.
SO, could anyone help me?
You should remove the and in this line:
#media and (min-width: #screen-md)
To become:
#media (min-width: #screen-md)