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;
}
Related
This may be a beginner question concerning CSS.
Is it possible to decide what to to print (dispay) using CSS and media queries?
Say for example if my window (or device screen) is smaller than 500 pixels then dispay "Hello!" otherwise dispay "Guten Tag!"
What I have found shows how to decide some display attribute (color or ...), never the contents itself.
You can use a pseudo-element with content:
p::before{ content: 'foo' }
#media (max-width: 500px){
p::before{ content: 'bar' }
}
<p></p>
JSFiddle
You'd need to have two elements, one for screen bigger than 500 and one for less than 500. Then use media queries to show/hide one on them
DEMO: http://jsbin.com/pizosehire/edit?output
HTML
<div class="large">Hello</div>
<div class="small">Guten Tag</div>
CSS
.small {
display: none;
}
#media (max-width: 500px) {
.large {
display: none;
}
.small {
display: block;
}
}
You will need to work with media-queries.
You can change your css to something like this
#media (max-width: 500px){
#mydiv{ background: url('img-sx.img') }
}
#media (min-width: 501px){
#mydiv{ background: url('img-s.img') }
}
I have sass code that generates a negated media query as follow (based on Exact NOT(Inverse) of CSS Media Query):
#media not screen and (max-width: 420px) {
.phone {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet {
display: none;
}
}
Why doesn't this work for the last div with combined classes?
<div class="phone">visible on: phone</div>
<div class="tablet">visible on: tablet</div>
<div class="phone tablet">visible on: phone and tablet</div>
The reason I'm inverting the logic is because if I would do it the other way around (showing instead of hiding). I wouldn't know what display type each element would be (block, inline, etc) and I can't set it back to it's previous value.
Example and source.
<div class="phone tablet"/> cannot be visible any time, because all time at least one of your 2 media queries are matched, so this div gets a display: none from at least one of those.
One solution would be
#media not screen and (max-width: 420px) {
.phone:not(.tablet) {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet:not(.phone) {
display: none;
}
}
Update to your Fiddle.
If you also want the div in question be hidden if both, .phone and .tablet are hidden, add
#media not screen and (max-width: 992px) {
.phone.tablet {
display: none;
}
}
Another update to your Fiddle.
I have some elements on my page that display and some that hide via a media query, and ultimately the nav disappears and is replaced by a responsive jQuery menu. This all works great, but when I resize the browser after, some of the elements that where once hidden are not not. This is what I have for the media query
#media only screen
and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}
I essintially want to hide it again on the same breakpoint sizing back up. This doesn't seem to work.
#media only screen
and (min-width: 1282px)
{
#wrapMiddleNew { display:none; }
}
I just got trough your page and you have to add more query format.. this should do the trick
/* Normal Formating */
#wrapLeft, #wrapMiddle, #wrapRight {
display:block;
}
#breakNav {
display:none;
}
/* Media Query */
#media only screen and (max-width: 1282px) {
#wrapLeft, #wrapRight {
display:none;
}
#breakNav {
display:block;
}
}
#media only screen and (max-width: 900px) {
#wrapLeft, #wrapRight, #breakNav {
display:none;
}
}
So each time your window goes lower 1282px will apear if its bigger will hide....
Do this:
#wrapMiddleNew{
display:none;
}
#media only screen and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}
You don't need the second query as the first bit of css only comes into effect while the screen is less than a certain number here is a demo:
http://jsfiddle.net/Hive7/WZXM6/
CSS:
#media all and (max-width: 500px) {
.hi {
display: none;
}
}
Here is a media query tutorial:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
You are targeting the wrong div your query should look like this:
#media only screen and (max-width: 1282px) {
#breakNav {
display: none;
}
}
Then remove any jquery affecting that element
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}
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; }
}