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;
}
}
Related
I have the following three queries. My purpose is when screen width is 1200 or higher; screen between 800 and 1199 and any screen width below 800. the following code does not fire on any width below 800.
I have no additional CSS to overwride any style. the 400px width still takes the styles of between 800 and 1199 pixels block.
What am I doing wrong?
#media screen and (min-width: 1200px) {
}
#media screen and (min-width: 800px) and (max-width: 1199px) {
}
#media screen and (max-width: 799px) {
}
`<!DOCTYPE html>
<html>
<head>
<style>
#media screen and (min-width: 1200px) {
body {
background-color: red;
}
}
#media screen and (min-width: 800px) and (max-width: 1199px) {
body {
background-color: green;
}
}
#media screen and (max-width: 799px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>`
You either go (desktop-first) approach OR (mobile-first) approach. Don't mix both of them.
Desktop First:
div {background:yellow; height:200px; width:200px; border:2px solid #000;}
#media screen and (max-width: 1200px) {
div {background:green;}
}
#media screen and (max-width: 800px) {
div {background:blue;}
}
#media screen and (max-width: 480px) {
div {background:pink;}
}
<div></div>
Mobile-First:
div {background:pink; height:200px; width:200px; border:2px solid #000;}
#media screen and (min-width: 480px) {
div {background:blue;}
}
#media screen and (min-width: 800px) {
div {background:green;}
}
#media screen and (min-width: 1200px) {
div {background:yellow;}
}
<div></div>
Start describing CSS from one end (Either biggest-screen size) OR (Smallest screen-size) and go to the other end. Never try add min-width and max-width in same CSS defination. Its confusing and inappropriate.
Also, use something like #media screen and (min-width:520px) and (max-width:560px) when after all CSS you've written, only for certain width-zone, you specifically want to change something or add a unique CSS. Otherwise don't use the mix of (min-width) and (max-width) in same CSS code ever. That's not a good practise.
Go with flow in uni-direction, either from Wide-screens then keep using (max-widths) OR starting from 0px or smallest-mobiles and then keep using (min-width) to keep defining new CSS till you reach other end.
This is with #media screen and (max-width:700px) {
https://i.gyazo.com/eab7c69146b5d47f3ce9adefae6e712d.png
When I do #media screen and (min-width:700px) { It gets screwed up. How do I change it to min-width without it messing up?
https://gyazo.com/3c27f20efe29a4cf001bf531dac59405.png
Use this code
#media only screen and (min-width: 700px) {
}
this will surly help you
You can use both min-widht and max-width and also combine them if you want.
min-width example:
#media screen and (min-width: 576px) {
body {
background-color: lightgreen;
}
}
max-width example:
#media screen and (max-width: 767.98px) {
body {
background-color: lightgreen;
}
}
min-width and max-width combination example:
#media (min-width: 576px) and (max-width: 767.98px) {
body {
background-color: lightgreen;
}
}
Note that I used 767.98px for the max-width because the next media rule would be for example #media (min-width: 768px) and (max-width: 991.98px) {}.
Read more about media rules here. You can also view how media rules are used in bootstrap here.
I want to create a website which is responsive on mobile and desktop, but my media queries won't work (it's do nithing).
I put my link below if any body wants html and css.
my CSS:
#media screen and (min-width: 900px){
.container{
width: 30vw;
}
.show-onscreen{
display: block;
}
.hide-onscreen{
display: none;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 300px){
.container{
width: 99vw ;
}
}
and this is full code:
full code
the below query might be the issue:
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
here min-width is greater than max-width, hence it will never execute.
You can try below if that is your goal:
#media screen and (min-width: 700px) and (max-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
max-width: 700px && min-width: 900px will never be true since width cannot be less than 700 and more that 900 on the same time.
I assume you meant to set the rules to be between 700 to 900
#media screen and (max-width: 900px) and (min-width: 700px){
Switch the width values in the media query
To build and website mobile-first you should develop first for mobile and then other sizes.
You will need to use something like this:
Usage: for mobile (except smallest screens), tablet, laptop, desktop, bigscreen. Anyone over 480px
#media only screen and (min-width: 480px) {
// content
}
Usage: for tablet, laptop, desktop, bigscreen. Anyone over 768px
#media only screen and (min-width: 768px) {
// content
}
Usage: for laptop, desktop and bigscreen. Anyone over 992px
#media only screen and (min-width: 992px) {
// content
}
Usage: for desktop and bigscreen. Anyone over 1200px
#media only screen and (min-width: 1200px) {
// content
}
Usage: just for bigscreen over 1600px
#media only screen and (min-width: 1600px) {
// content
}
To use this code you can develop without set media queries until you need to change some css property for bigger screens.
I suggest you to read this article: A Hands-On Guide to Mobile-First Responsive Design
I am trying to test media queries out. I want the background color to render blue when the width is less <= 600 and height <= 400 pixels.
I've tried using:
#media only screen and (max-width: 600px) and (max-height: 400px),
#media only screen and (max-width: 600px) and only screen (max-height: 400px),
#media only screen and (max-width: 600px and max-height: 400px),
#media only screen and (max-width: 600px), (max-height: 400px)
but 1-3 didn't do anything and 4 rendered the background blue if either statement were true. Whenever I Google what I want to do I see answers that say solutions like #4. (e.g. this SO answer.) This is not what I want.
I got it working by using the nested queries below. Is this the best/only way to do what I want or is there a cleaner solution?
#media only screen and (max-width: 600px) {
#media only screen and (max-height: 400px) {
body {
background-color: blue;
}
}
}
The cleanest way would be your first proposed solution1 which actually just works fine - see snippet below (expand to full size):
div {
background-color: blue;
height: 300px;
}
#media only screen and (max-width: 600px) and (max-height: 400px) {
div {
background-color: red;
}
}
<div></div>
1 #media only screen and (max-width: 600px) and (max-height: 400px)
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}