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)
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 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;
}
}
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 running a small website on Joomla and cannot get the responsiveness to work. I am running media queries for the screen sizes and making adjustments as needed, but cannot get them to adjust for anything under 760px wide.
I've checked all four of my media queries and cannot find a solution. I'm sure it's something simple, but I cannot find it. I do
/* Note: Design for a width of 768px */
#media (min-width: 768px) and (max-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px;
}}
/* Note: Design for a width of 480px */
#media (min-width: 480px) and (max-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px;
}}
/* Note: Design for a width of 320px */
#media (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}}
I expect the main DIV to scale for 768px, 480px and 320px, but cannot get it to scale properly.
The website is located at:
https://crafted-development.com
My Css is located at:
https://www.crafted-development.com/templates/jf_calla-exteriors/css/template.css
You need to close the media tag also at the end with "}"
Also, instead of media, try adding "#media only screen and"
Example::
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
Also, the meta tag is necessary
<meta name="viewport" content="width=device-width, initial-scale=1">
Use this css
#media only screen and (min-device-width: 768px) and (max-device-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px !important;
}
}
#media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px !important;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 479px)
{
.main, #jf-footer .main-inner1 {
width: 316px !important;
}
}
This turned out to be the solution: Thank you guys!
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}