Hey guys I wrote 6 different responsive for my page but it just read one of my styles for all of them and other 5 styles don't work at all.
I'd be glad if you could help me
Try this:
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px) {
.header { width: 90%; }
}
#media only screen and (min-width: 768px) and (max-width: 769px) and (min-height: 1024px) and (max-height: 1025px) {
.header { width: 100%; }
}
Related
I have three media queries that range like this:
#media screen and (min-width: 360px) and (max-width: 479px)
#media screen and (min-width: 480px) and (max-width 767px)
#media screen and (min-width: 768px) and (max-width: 1023px)
The issue is that my website doesn't read the styles in the width range of 479px to 767px which is something I do not understand, any assistance with this of suggestions are very much liked, thanks!
You have a typo you forgot the colon at the (max-width 767px) it should read like the following:
#media screen and (min-width: 360px) and (max-width: 479px)
#media screen and (min-width: 480px) and (max-width: 767px)
#media screen and (min-width: 768px) and (max-width: 1023px)
Here is a snippet
#media screen and (min-width: 360px) and (max-width: 479px){
body{background:green;}
}
#media screen and (min-width: 480px) and (max-width: 767px){
body{background:yellow;}
}
#media screen and (min-width: 768px) and (max-width: 1023px){
body{background:red;}
}
I'm trying to make the padding around a div scale from 15% to 5% within the bounds of a media query.
So, let's say I've defined the min & max width where I want this to take effect:
#media (min-width: 500px) and (max-width: 1500px)
My goal is to go from 15% # 1500px to 5% # 500px. I know doing this will require an equation to change the ratio based on screen width, but I'm unsure about/inexperienced setting these types of things up.
Any advice/suggestions are appreciated!
The official answer is this can't be done using CSS alone.
However, you can use something like this for a workaround...
div.dynamic {padding:5vw; border:1px solid;}
#media (min-width: 500px) and (max-width: 599px) {div.dynamic {padding:5vw;}}
#media (min-width: 600px) and (max-width: 699px) {div.dynamic {padding:6vw;}}
#media (min-width: 700px) and (max-width: 799px) {div.dynamic {padding:7vw;}}
#media (min-width: 800px) and (max-width: 899px) {div.dynamic {padding:8vw;}}
#media (min-width: 900px) and (max-width: 999px) {div.dynamic {padding:9vw;}}
#media (min-width: 1000px) and (max-width: 1099px) {div.dynamic {padding:10vw;}}
#media (min-width: 1100px) and (max-width: 1199px) {div.dynamic {padding:11vw;}}
#media (min-width: 1200px) and (max-width: 1299px) {div.dynamic {padding:12vw;}}
#media (min-width: 1300px) and (max-width: 1399px) {div.dynamic {padding:13vw;}}
#media (min-width: 1400px) and (max-width: 1499px) {div.dynamic {padding:14vw;}}
#media (min-width: 1500px) {div.dynamic {padding:15vw;}}
<div class="dynamic">This is the div</div>
I am trying to make a simple webpage responsive but somehow, after the first breaking point, nothing happens. I put the whole code in this fiddle: https://jsfiddle.net/Cilvako/umwhLdqx/
Bellow are the breakpoints I am trying to use but still haven't got to the third since I couldn't make the second work.
/Media Query/
#media screen and (min-device-width : 1px) and (max-device-width : 480px) {
}
#media screen and (min-width : 481px) and (max-width : 768px) {
}
#media screen and (min-width : 769px) and (max-width : 1200px) {
}
#media only screen and (min-width : 1200px) {
}
Don't mix device-width with the normal width if you can. Simply use min-width and max-width if you're targeting only browser window size.
Read this if you're confused CSS media queries min-width and min-device-width conflicting?
You are supposed to write CSS in the media queries and also close and open them properly using '{' and '}' which you are not on the fiddle.
A media query looks something like
#media screen and (min-width : 769px) and (max-width : 1199px) {
h1 { color: blue; }
}
#media screen and (min-width : 1200px) and (max-width : 1800px) {
h1 { color: green; }
}
So between 769px and 1199px, h1s would be blue, and between 1200px and 1800px they would be green. I'm not seeing that in your JSFiddle - the brackets are not closed properly, and I can't see what you're trying to do with the rules.
You almost never ever ever need a max-width
fiddle
body {
background: gray;
}
#media screen and (min-width: 500px) {
body {
background: red;
}
}
#media screen and (min-width: 500px) {
body {
background: red;
}
}
#media screen and (min-width: 800px) {
body {
background: lightblue;
}
}
#media screen and (min-width: 1000px) {
body {
background: orange;
}
}
#media screen and (min-width: 1300px) {
body {
background: pink;
}
}
I'm building a responsive site but when I resize the window the media queries aren't corresponding with my screen resolution, so for instance,
#media screen and (min-width:640px) and (max-width: 800px) is resulting in these design elements to be when the screen is above 800 pixels and when I'm at 700 pixels my designs are being set to #media screen and (min-width: 400px) and (max-width:640px) for some reason. Does anyone know why this could be happening?
Update: The max-width 640px media query is being set to my screen at over 700 pixels still.
#media screen and (max-width: 1024px) {
.body{
width:800px;
}
}
#media screen and (max-width: 800px) {
.body {
width:600px;
}
}
#media screen and (max-width:640px) {
.body {
width:480px;
}
}
#media screen and (max-width:400px) {
.body {
width:260px;
}
}
To start troubleshooting, double check that in the head of your document you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Let me know how you get on.
Edit
Thanks for the extra code. Check out this working example. The CSS and the order of the media queries is below:
/* set default */
.body{
width:800px;
}
#media screen and (max-width:400px) {
.body {
width:260px;
}
}
#media screen and (min-width: 401px) and (max-width:640px) {
.body {
width:480px;
}
}
#media screen and (min-width: 641px) and (max-width: 800px) {
.body {
width:600px;
}
}
#media screen and (min-width: 801px) and (max-width: 1024px) {
.body{
width:800px;
}
}
I'm trying to create a responsive layout and using CSS media queries to make it fit in various screen resolutions.
But when I made created Media Queries for below mentioned resolutions:
/*1280 x 1024*/
/*1280 x 960*/
/*1280 x 800*/
/*1280 x 768*/
/*1280 x 720*/
Being same width, the broswer picks the last "720px" css only
Here is my code:
/*1280 x 1024*/
#media screen and (max-width: 1280px) and (max-height: 1024px) and (min-height: 961px) {
.resolution {
color:#0000ff;
}
}
/*1280 x 960*/
#media screen and (max-width: 1280px) and (max-height: 960px) and (min-height: 801px) {
.resolution {
color:#00ff72;
}
}
/*1280 x 800*/
#media screen and (max-width: 1280px) and (max-height: 800px) and (min-height: 769px) {
.resolution {
color:#1e00ff;
}
}
/*1280 x 768*/
#media screen and (max-width: 1280px) and (max-height: 768px) and (min-height: 721px) {
.resolution {
color:#ff00f0;
}
}
/*1280 x 720*/
#media screen and (max-width: 1280px) and (max-height: 720px) and (min-height:300px) {
.resolution {
color:#fffc00;
}
}
<div class="resolution">Lorem Ipsum</div>
Please suggest!!!
I put your code into a new HTML file and tested it at different resolutions. It seems to be working fine. Here's a screencast:
http://screencast.com/t/LdtVNqDDP
Here's a link to the browser addon you see me using in the screencast.