I am trying to do tests with media queries but it does not apply the max-width, instead the min width does
I leave my css code
body{
background: grey;
}
#media (max-width: 500px) {
body {
background-color:violet;}
}
#media (min-width: 1220px) {
body{
background-color: tomato;
}
}
any idea why it happens?
Your code works, if width less then 500, background-color:violet;
if width much then 1220, background-color: tomato; and between background: grey;
Related
#media only screen and (min-width: 275px)
{
body
{
background-color: black;
}
}
I want to make the background color black when it detects 275px - 500px and i want to make the background color blue when it detects 500px - 750px.This is a reference only simply i want to make css codes with different ranges
Also you can write first media query only min width because another media query also set min width.
#media only screen and (min-width: 275px) {
body {
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px) {
body {
background-color: blue;
}
}
Just add a max-width to complete the range:
#media only screen and (min-width: 275px) and (max-width: 500px)
{
body
{
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px)
{
body
{
background-color: blue;
}
}
If you look at the code, there are two media queries, the one with a max width of 1024 pixels seems to work fine and apply all the styles but the one with a max width of 470 pixels won’t work or apply any of the styles. Why is this happening? Any help appreciated.
https://codepen.io/FreemanW/pen/QWwRBMP?editors=1100
#media (max-width: 470px) {
.banner {
align-items: flex-end;
}
.title-box {
width: 100%;
}
.container {
width: 100%;
}
}
``
Everything within 470px is also within 1024px, so perhaps there's some sort of conflict going on there.
You could try using max-width: 470px and min-width: 471px, thus dividing your options into non-overlapping values :)
Be sure that the media-query with the smaller screen-width is at the end.
That works:
#media (max-width: 1024px) {
h1 {
color: blue;
}
}
#media (max-width: 470px) {
h1 {
color: red;
}
}
<h1>TEST</h1>
That doesn't works:
#media (max-width: 470px) {
h1 {
color: red;
}
}
#media (max-width: 1024px) {
h1 {
color: blue;
}
}
<h1>TEST</h1>
Here am using this two media query ,as I read ,First MediaQuery would affect background-color if size of screen size is equal or less then 340px ,where as 2nd MediaQuery would effect if size of screen is less then or equal to 360px...
#media only screen and (max-width: 340px) {
#arf_recaptcha_hruwj8 iframe {
background-color: blue;
}
}
#media only screen and (max-width: 360px) {
#arf_recaptcha_hruwj8 iframe {
background-color: red;
}
}
What i thought is if size is under 340px,1st query would effect and because we are under 340px now. not in 360px.But instead of becoming blue ,it remain red only.
1.Could You please explain me this confusion ?
2.How to write media query so that when its between 341px and 360px It should be red and when <= 340px i have to be blue.
Just swipe your media query and check it will work for sure.
#media only screen and (max-width: 360px) {
iframe {
background-color: red;
}
}
#media only screen and (max-width: 340px) {
iframe {
background-color: blue;
}
}
It's about precedence(CSS Specificity). Last one always applies if you are applying using same selector. As It reads code/file from top to bottom.
#idid{
height: 50px;
width: 50px;
background-color: red;
}
#media only screen and (max-width: 360px) {
#idid {
background-color: black;
}
}
#media only screen and (max-width: 340px) {
#idid {
background-color: blue;
}
}
JSBin link: JSBin LInk
You can also try css specificity here: CSS Specificity checker
#media only screen and (max-width: 360px) and (min-width: 340px)
{
body {
background-color:red ;
}
}
#media only screen and (max-width: 339px) {
body {
background-color: blue;
}
It's about precedence media query. Last one always applies if you are applying using same selector. swipe the code itz works perfectly
I have this code . When i resize the browser to min-width: 480px it doesn't change the background color to blue and width to 100px
this is my code so far:
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
.boxcontainer{
width: 1300px;
background-color: green;
height: 200px;
}
<div class="boxcontainer">
</div>
Thank you
Switch the order of the CSS rule, Change your CSS into
.boxcontainer {
width: 1300px;
background-color: green;
height: 200px;
}
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
As in this JSFiddle example. the background is blue as long as the width is not less than 480px, otherwise it turns green.
IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px} makes me think you want that , then just change the media query break point to #media screen and (max-width: 480px) instead of #media screen and (min-width: 480px).
You can see the second option in this JSFiddle
I want to edit the margin-top of a text in the mobile device. I have come this far but I know there is something crazy in the code:
.Foljoss {
padding-left: 18px;
background: #fff;
}
#media screen and
(max-width: 768px; margin-top:17px)
It is the last part in which I dont get it. How can I adjust the top margin for the <div class="Foljoss"> on the mobile version? Notice that the #media screen-part is not correct.
You need to wrap the css inside a selector inside the media query.
#media screen and (max-width: 768px) {
.Foljoss {
margin-top: 17px;
}
}
body {
background-color: lightgreen;
}
.show-on-mobile {
display: none;
}
#media screen and (max-width: 568px) {
.show-on-mobile {
display: block;
}
.hide-on-mobile {
display: none;
}
body {
background-color: lightblue;
}
}
<div class="show-on-mobile">Only visible when width is <= 568px</div>
<div class="hide-on-mobile">Disappears when screen width > 568px</div>
/* 767 is max for mobile */
#media screen and (max-width: 767px) {
.Foljoss {
margin-top: 17px;
}
}