I hope someone can help me with media queries?.
I have a series of min width -max width media queries .
However, if I remove the max-width syntax, the layout will break, but I can't figure out why this is happening.
If I remove the max-width syntax (including the and), the logic should be the same.. I'm saying, apply styles from 320px up, then apply new styles from 480px up
How can I convert this to just min width? (mobile first approach).
Am I missing something obvious?
#media only screen and (min-width: 320px) and (max-width : 480px) {
#header h1 {
font-size: 2em;
}
#nav ul li {
margin: 0 .8em .6em 0;
display: block;
}
.......................more rules
}
#media only screen and (min-width: 480px) and (max-width : 800px) {
#header h1 {
font-size: 2.4em;
}
#nav ul li {
margin: 0 .8em .6em 0;
display: inline-block;
....................................more rules
}
}
You don't need to set max-width if you are using Mobile First Method:
So, try something like this:
/*========== Mobile First Method ==========*/
#media only screen and (min-width : 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 480px) {
/*your CSS Rules*/
}
In case you want to use the Non-Mobile First Method you don't need to set min-width and it looks like this:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 320px) {
/*your CSS Rules*/
}
Related
How could one go about creating a div, that would have a default size of XX%, however, if the screen gets too small it would switch into 100% size? I have tried using min-width property but the problem with this is that it will not be responsive after the min-width is reached and will overflow if the screen is even smaller.
You have to use #media queries. So let's say you have a <div> that should take up only 50% of the web page and then you need to show it full width once it enters mobile phone, say 640px width:
div {
width: 50%;
}
#media screen and (max-width: 640px) {
div {
width: 100%;
}
}
you must use #media for that like this :
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
You can do it with #media queries, e.g.:
div {
width: 50%;
height: 100px;
border: 1px solid;
}
#media (max-width: 568px) { /* adjust to your needs */
div {width: 100%}
}
<div></div>
This question already has answers here:
Font scaling based on size of container
(41 answers)
Closed 5 years ago.
Facing problem with the font-size setting issue. for sake of better readability I am changing my font-size for different devices i.e mobile,tablets and extra small devices in this way my css is increasing that is fatal for page speed and optimization as well.I just want to adjust my font-size automatically according to container size.
Here is my example code which i am writing for different devices and images for output to understand the problem
.heading{font-size: 50px;}
#media all and (min-width: 768px) and (max-width: 800px){
.heading{font-size: 40px;}
}
#media all and (min-width: 400px) and (max-width: 480px){
.heading{font-size: 30px;}
}
#media all and (min-width: 320px) and (max-width: 375px){
.heading{font-size: 20px;}
}
<h1 class="heading">Font size issue for different devices</h1>
**.heading{font-size: 20vw;}
==============
#media (max-width: 800px){
.heading{font-size: 16vw;}
}
==============
#media (max-width: 480px){
.heading{font-size: 14vw;}
}
==============
#media (max-width: 375px){
.heading{font-size: 12vw;}
}
==============
- List item
# vw doest not support in safari browser #
Use em for responsive websites. The em is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt
.heading{font-size: 1.6em;}
#media (max-width: 800px){
.heading{font-size: 1.4;}
}
#media (max-width: 480px){
.heading{font-size: 1.2em;}
}
#media (max-width: 375px){
.heading{font-size: 1em;}
}
<h1 class="heading">Font size issue for different devices</h1>
.heading {
font-size: 50px;
}
#media (max-width: 800px) {
.heading {
font-size: 40px;
}
}
#media (max-width: 480px) {
.heading {
font-size: 30px;
}
}
#media (max-width: 375px) {
.heading {
font-size: 20px;
}
}
<h1 class="heading">Font size issue for different devices</h1>
When you use media query use only #media (parameter) Or use
.heading{font-size: 100%;}
I am using this code in my web page and I tried different settings for min-width but it take values only from the media query having least width.
#media only screen and (min-width: 900px) {
li{
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.one{
padding-left: 13%;
}
#media only screen and (min-width: 800px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;}
li.two{
padding-left: 9%;
}
}
#media only screen and (min-width: 600px),screen and (max-width: 601px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.three{
padding-left: 7%;
}
}
Don't know what is stopping other queries to work properly.
Please add this code in your HTML page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.) Your third query should be written like this:
#media only screen and (min-width: 600px) and (max-width: 601px) {...
(a comma would mean two independent selectors)
2.) You made your li elements inline elements. But an inline element can't have any padding - all these padding values don't affect anything. So change the display settings to inline-block for these.
The order of query sizes should be changed. In CSS, the last valid query wins, so the query falls though to the smallest. The largest should come last.
#media (min-width: 768px) {} works for me. also add <meta name="viewport" content="width=device-width, initial-scale=1"> to head tag
#media screen and (min-width: 320px) {
//your css class
}
#media screen and (min-width: 321px) and (max-width:480px){
//your css class
}
#media screen and (min-width: 481px) and (max-width:720px) {
//your css class
}
#media screen and(min-width: 721px) and (max-width:1080px) {
//your css class
}
#media screen and(min-width: 1080px) and (max-width: 1280px){
//your css class
}
#media screen and (min-width: 1281px) and (max-width: 1920px){
//your css class
}
Try using your queries like this, this way worked for me
You have left one curly bracket inside 900 media query. Copy this code and replace media query.
#media only screen and (min-width: 900px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.one{
padding-left: 13%;
}
}
#media only screen and (min-width: 800px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.two{
padding-left: 9%;
}
}
#media only screen and (min-width: 600px) and (max-width: 601px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.three{
padding-left: 7%;
}
}
add this to in your head tag and close proper media query braces you didnt close do check properly.
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;
}
}
So I am having a noob issue, one that is annoying me greatly. So I have the following type of style sheet:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
#media (min-width: 960px) {
}
#media (min-width: 768px) {
}
#media (min-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
}
#media (min-width: 480px) {
#content .post-content .row .col-md-6 .box-top {
width: 353px;
}
}
Now the issue is that anything over 641px will use the 640px rule. Even if the screen is 1920x1200. I think its because I don't have a width defined for the original element? if thats case, I slap a width on the original element of 453px:
#content .post-content .row .col-md-6 .box-top {
...
width: 453px;
}
But the problem is, its almost like the #media rule has precedence, because in the crhome inspector when the width is 1366px, it still uses the 640px rule instead of the width I just defined. Now I was thinking of, instead of doing: (min-width: xyzpx) I would use max-width but that seems to take a way the smooth scaling down affect that the client wants, they don't want it jumping between media sizes.
Should my element have a max-width of 453px to override the #media rule?
#content .post-content .row .col-md-6 .box-top {
...
max-width: 453px; /** or a min-width: 453px **/
}
Essentially my questions are:
Why is my #media rule overriding any other rule on the page. In this case why is it using the width in the 640 rule to apply to anything above when the original definition of the element in question does not specific a width?
And
Why is when I specify a width for that original definition of the element, that the #media rule, which defined a new width at 640px overrides it, especially when the windows width is say 1366px?
From what I understand your issue is that you want to apply the Non-Mobile First Method, and by using that you have to use the max-width instead of min-width
like this:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width : 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 320px) {
/*your CSS Rules*/
}
or if you want to use the Mobile First Method then you should use min-width but this way:
/*========== Mobile First Method ==========*/
#media only screen and (min-width : 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 960px) {
/*your CSS Rules*/
}
Below is a snippet from what I understand it is what you are looking for:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script,arial";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
/*your CSS Rules*/
}
#media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
<div id="content">
<div class="post-content">
<div class="row">
<div class="col-md-6">
<div class="box-top">Something
</div>
</div>
</div>
</div>
</div>
Try reversing order of your media queries. Smallest min-width first.
Say your window width is 700px. Then (min-width: 960px) and (min-width: 768px) does not match and are skipped but both (min-width: 640px) and (min-width: 480px) do match styles inside these blocks are applied in order they appear in CSS file. And later styles override previous styles, e.g.:
p { color: green; }
p { color: red; }
Your p color would be red.
This live example may be a bit clearer: http://jsbin.com/yuqigedudi/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* Default color when no media queries bellow match.
In this our case when window width < 200px */
p { color: black }
/* If window size >= 200px */
#media (min-width: 200px) {
p { color: red }
}
/* If window size >= 300px */
#media (min-width: 300px) {
p { color: orange }
}
/* If window size >= 400px */
#media (min-width: 400px) {
p { color: blue }
}
</style>
</head>
<body>
<p>
Resize this frame and see my color change!
</p>
</body>
</html>