I need to lose the background image in mobile view but my #media query seems to be ignoring the request, this also applies to an image I am using too?
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.logo {
background-image:URL(img/allthingslogoalt.gif);
height:32px;
width:222px;
margin:110px auto 0 auto;
background-size:444px 64px;
}
}
}
#media screen and (max-device-width: 800px) {
#allthingsus {
background-color:#FFF;
}
}
#media screen and (max-device-width: 480px) {
#allthingsus {
background-color:#FFF;
}
}
Here is the main css:
.logo {
background-image:URL(img/allthingslogo.gif);
height:64px;
width:444px;
margin:180px auto 0 auto;
}
#allthingsus {
background-color:#FFF;
background-image:URL(img/greypointer.gif);
background-repeat:no-repeat;
background-position:top center;
}
i am not sure how to cure this problem? I have tried adding it as a class, an ID, changing the min/max heights but nothing changes?
Assuming this is the bit that is attempting to change your background image:
#media screen and (max-device-width: 480px) {
#allthingsus {
background-color:#FFF;
}
You're only setting a background-color and therefore not changing the background-image. You need to set background-image: none; for this media query.
Edit
Couldn't really test using the media query max-device-width so have done a fiddle here (http://jsfiddle.net/rnewport/em35H/1/) using max-width instead and it seemed to be working ok for that
Related
Recently, I find myself doing CSS in a way that I really like. Not mobile first, not desktop first. I just go and do:
Generic properties
Add stuff for different screen sizes with breakpoints that make that specific design look good
So I will do something like:
.polaroid-cards {
display: grid;
}
/* Up until 860px */
#media (max-width: 860px) {
.polaroid-cards {
grid-template-columns: 1fr;
padding: 3rem;
}
}
/* From 860px on */
#media (min-width: 860px) {
.polaroid-cards {
grid-template-columns: 1fr 1fr;
padding: 3rem 15%;
}
}
And those rules are specific for that component. Other components may break at lower sizes or break three times, whatever is needed to make them look good.
Yeah well that was to give some context.
But the question I have is, regarding:
#media (max-width: 860px) { ...
#media (min-width: 860px) { ...
Is that okay?
Should it be?
#media (max-width: 859px) { ...
#media (min-width: 860px) { ...
I of course tested both versions and both work fine (apparently), but I want to understand the math behind this, and what internal rules the browser is applying, so I "help the browser" or at least don't cause unexpected bugs.
min- and max-width are both inclusive, i.e. min-width: 860px means any screen that is 860px wide or wider. This means that
#media (max-width: 860px) { ...
#media (min-width: 860px) { ...
do overlap and the usual css precedence rules determine which to choose at a screen of width 860px exactly. So if you want to be absolutely, totally sure which rule will apply when, one should use 859px (or 861px).
Luckily, the Media Queries Level 4 spec, which is beginning to roll out to browsers, enables using regular comparison operators, making this cleaner and more obvious. You can then write
#media (width < 860px) { ...
#media (width >= 860px) { ...
And for three breakpoints, you can even do
#media (width < 860px) { ...
#media (860 <= width < 1080) { ...
#media (width >= 1080) { ...
When CSS media queries overlap, they follow the cascade rule, so in the example you shared (with some addition):
#media (max-width: 860px) { div { color: red; } }
#media (min-width: 860px) { div { color: green; } }
If the viewport is exactly 860px, both media queries will return true, which will be the equivalent of:
{ div { color: red; } }
{ div { color: green; } }
I which case, the second rule takes over
You should give 1px difference.
If you inspect the square below at 1024px, you can see that the green background overrides the red one but only because it's written after the red background, both rules are applied.
But if you check the border, only the orange one is applyed for a width >=1024px.
div{
width:50px;
height:50px;
}
#media (max-width: 1023px) {
div{
border:5px solid blue;
}
}
#media (max-width: 1024px) {
div{
background-color:red;
}
}
#media (min-width: 1024px) {
div{
background-color:green;
border:5px solid orange;
}
}
<div></div>
Also, a good way to set your media queries is to use the default css for the smallest size and set media rules with min-width like the example below :
div{
width:50px;
height:50px;
background-color:blue;
}
#media (min-width: 1024px) {
div{
background-color:orange;
}
}
#media (min-width: 1920px) {
div{
background-color:red;
}
}
<div></div>
I have the following code :
#media (min-width: 1200px) {
.color {
color: blue;
}
}
#media (min-width: 992px) {
.color {
color: red;
}
}
#media (min-width: 768px) {
.color {
color: green;
}
}
#media (max-width: 767px) {
}
<div class="color">Wow ji</div>
No matter what the screen size, Wow ji appears in green color only. What am I doing wrong here ?
In CSS, it is the last corresponding style that is applied, so in your code, as long as the screen is at least 768px, it will appear green.
You need either to set a max-width in the first tests, or do them in the inverse order.
Because what you are saying is at 768px or higher you want .color to be green you need to swap the order of your media queries around or use max-width
You have a bad syntax and usage, it's not even the same each time.
I would recommand doing like this :
#media screen and (max-width: 768px) { // or whatever screen size
.color {
color: green;
}
}
And you better add a <meta> viewport in your HTML to make your media queries working fine.
Some docs:
MDN - media queries
MDN - Using the viewport meta tag to control layout on mobile browsers
max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule. Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule. I have changed your code with max-width now its working fine all media queries , just resize the browser
#media ( min-width : 1200px) {
.color{
color: blue;
}
}
#media ( max-width : 992px) {
.color{
color: red;
}
}
#media(max-width:768px){
.color{
color: green;
}
}
#media(max-width:767px) {
.color{
color: yellow;
}
}
<div class="color">Wow ji</div>
I need to set a height on a div and i would like to set it relative to the device screen.
For ie :
/*Extra small devices Phones (<768px)*/
.myClass { height: 200px; }
/*Small devices Tablets (≥768px)*/
.myClass { height: 400px; }
/*Medium devices Desktops (≥992px)*/
.myClass { height: 600px; }
/*Large devices Desktops (≥1200px)*/
.myClass { height: 800px; }
Edit: Improved example at CodePen.
I would add to it from a bit different angle. Often times you might need to perform different operations in JS depending on your breakpoint. For that purpose I often use:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
These 4 divs allow you check for currently active breakpoint. For an easy JS detection, you can have a set of 4 functions like this one :
function isMobile() {
return $('.device-xs').is(':visible');
}
Your question lacks enough detail for me to help you better, but in case what you need can't be achieved by simply defining different properties of an element in a different media query, you could assign certain class, at any point, by:
if( isMobile() ) {
$('.someClass').css('property', 'value');
}
#media screen and (max-width: 768px){
.myClass{
height:200px;
}
}
Generally with responsive webpages you just let content resize itself and just make divs the same height as eachother when they are on the same row. I assume you are using bootstrap as they have the same breakpoints. However I don't know the exact problem you are trying to solve so:
This mobile first approach by not adding media query for the smallest breakpoint as it is the default anyway. This will deal with infinitely large screen by setting height to 800px.
.myClass {
height: 200px; /*default extra small*/
#media (min-width: 768px) /*small*/
{
height: 400px;
}
#media (min-width: 992px) /*medium*/
{
height: 600px;
}
#media (min-width: 1200px) /*large*/
{
height: 800px;
}
Look at media queries.
#media (max-width: 768px) {
.myClass {
display: none;
}
}
#media (max-width: 992px) {
.myClass{
display: none;
}
}
#media (max-width: 1200px) {
.myClass{
display: block;
}
}
Use the viewport width and height after declaring the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
you can set .myClass height as a percentage of the viewport height and get rid of the media queries, like this:
.myClass { height: 30vh; }
You'll also need to define default class, for example screen size - greater than 1200px
/*Extra small devices Phones (<768px)*/
#media only screen and (min-width:768px){
.myClass { height: 200px; }
}
/*Small devices Tablets (≥768px)*/
#media only screen and (max-width:768px){
.myClass { height: 400px; }
}
/*Medium devices Desktops (≥992px)*/
#media only screen and (max-width:992px){
.myClass { height: 600px; }
}
/*Large devices Desktops (≥1200px)*/
#media only screen and (max-width:1200px){
.myClass { height: 800px; }
}
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
Okay, so I have a couple of media queries at different break-points in my design.
For example
#media all and (max-width:700px){
body{
background:red;
}
}
#media all and(max-width:560px){
body{
background:blue;
}
}
It works fine on my desktop, but when I go to view it on my LG android browser, only the first media query triggers.
It doesn't have anything to do with the widths, because if I change the max-width of the first query to something less than 560 it gets triggered anyway.
Any thoughts on this?
Remove the "all and"s:
http://jsfiddle.net/C3R9J/
#media (max-width:700px){
body{
background:red;
}
}
#media (max-width:560px){
body{
background:blue;
}
}
Take a look at Example 5 this link to WC3:
http://www.w3.org/TR/css3-mediaqueries/
if the media type is not explicitly given it is ‘all’.
You can try with min-width. What it does: device width from 320px to 559px, device width from 560px to 699px, device width from 700px to XXX. The latest media type will overwrite all others media type.
#media only screen and (min-width: 320px) {
body { background:red; }
}
#media only screen and (min-width: 560px) {
body { background:blue; }
}
#media only screen and (min-width: 700px) {
body { background:green; }
}