I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.
Related
I am trying media queries, but they won't work on 768px and 576px. I tried the minimum width but it also does not work.
.changing-color {
background-color: powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px) {
.changing-color {
background-color: chartreuse;
}
}
#media screen and (max-width: 1200px) {
.changing-color {
background-color: blueviolet;
}
}
#media screen and (max-width: 992px) {
.changing-color {
background-color: brown;
}
}
#media screen and (max-width: 768px) {
.changing-color {
background-color: darkorange;
}
}
#media screen and (max-width: 576px) {
.changing-color {
background-color: darkkhaki;
}
}
<div class="changing-color"></div>
Your CSS is correct, it works in this pen. Maybe you are not resizing your screen? Because that is exactly what these media-queries are for.
This snippet below is limited in width, so it will show probably darkorange depending on how you are viewing this page. On mobile it might even show darkkhaki.
.changing-color {
background-color:powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px){
.changing-color {
background-color:chartreuse;
}
}
#media screen and (max-width: 1200px){
.changing-color {
background-color:blueviolet;
}
}
#media screen and (max-width: 992px){
.changing-color {
background-color:brown;
}
}
#media screen and (max-width: 768px){
.changing-color {
background-color:darkorange;
}
}
#media screen and (max-width: 576px){
.changing-color {
background-color:darkkhaki;
}
}
<div class="thing changing-color"></div>
Have you added a viewport meta tag like this ?
<meta name="viewport" content="width=device-width,initial-scale=1">
This is needed because by default, most mobile browsers lie about their viewport width.
Reference Beginner's Guide to Media Queries
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
I'm trying to move from Bootstrap to Foundation, but I'm having an issue in trying to identify how to exactly change the breakpoint for the topbar in Foundation. I'm using a a CDN version of the minified CSS for Foundation, so I do NOT have access to the settings SASS file to modify this. Is there a quick CSS override workaround? So far my searches on here, and Google, haven't turned up a working solution.
Import another CSS file below the minified Foundation CSS that will target the topbar
<link rel="stylesheet" href="foundation-min.css">
<link rel="stylesheet" href="override.css">
So, for example, if .topbar has margin: 1px; override it on override.css by setting another margin: 2px; attribute there.
This post will help
https://stackoverflow.com/a/31511646/6294600
Have you checked this one https://zurb.com/university/lessons/change-foundation-s-default-breakpoints
EDIT: a hint here...
look for the .show-for-medium class... I hope you know what to do after that... Don't give up...
#media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
#media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display: none !important; } }
#media screen and (min-width: 40em) {
.hide-for-medium {
display: none !important; } }
#media screen and (max-width: 39.9375em) {
.show-for-medium {
display: none !important; } }
#media screen and (min-width: 40em) and (max-width: 63.9375em) {
.hide-for-medium-only {
display: none !important; } }
#media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
.show-for-medium-only {
display: none !important; } }
#media screen and (min-width: 64em) {
.hide-for-large {
display: none !important; } }
#media screen and (max-width: 63.9375em) {
.show-for-large {
display: none !important; } }
#media screen and (min-width: 64em) and (max-width: 74.9375em) {
.hide-for-large-only {
display: none !important; } }
#media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
.show-for-large-only {
display: none !important; } }
These parts can be found in
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css
Change the values, I hope this answers the question. Happy Coding...
LAST BIT OF INFO:
change the min-width size
#media screen and (min-width: 64em) {
.top-bar{
display:none;
}
}
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;}
}
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually matters. I didn't test it in every single browser, but just on Chrome. Is there an explanation for this behaviour? Sometimes it gets frustrating when your site doesn't work as it should and you are unsure if it's the query or the order in which the query is written.
Here's an example:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two">Contact us</div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
However, If I wrote the query for 1024x600 in the last, the browser would ignore it and apply the margin value specified in the starting of the CSS (margin-top:2em).
/* Media Queries - Re-arranged version */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
If my understanding of media queries are correct, the order shouldn't matter, but it seems it does. What could be the reason?
That's by design of CSS — Cascading Style Sheet.
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
So, given this CSS
#media (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
#media (max-width: 400px) {
body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
Finally, with
#media (max-width: 400px) {
body {
background: blue !important;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
or
#media (max-width: 400px) {
html > body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
#media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.