Show/Hide Div Based on Browser Size Using Only CSS

show/hide div based on browser size using ONLY css?

class name can't start with the digit. change it to e.g. x700,x490,x290 and it should work

Hide div element when screen size is smaller than a specific size

You can do this with CSS:

@media only screen and (max-width: 1026px) {
    #fadeshow1 {
        display: none;
    }
}

We're using max-width, because we want to make an exception to the CSS, when a screen is smaller than the 1026px.
min-width would make the CSS rule count for all screens of 1026px width and larger.

Something to keep in mind is that @media queries are not supported on IE8 and lower.

Hiding DIV from left size while resizing browser window

OK, finally I have found two solutions. I think that solution 2 is better because of better browser compatibility.

Solution 1: CSS 3

CSS

#wrapper {
    position: relative;
}

#left {
    position: fixed;
    left: 0;
    top: 0;
    width: 50%;
    padding-right: 500px;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    background-image: url('http://s11.postimg.org/a1hfwxgs3/left_428x600.jpg');
    background-repeat: no-repeat;
    background-position: right 500px top;
    height: 600px;
}

#right {
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    padding-left: 500px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url('http://s1.postimg.org/tn5copctb/right_428x600.jpg');
    background-repeat: no-repeat;
    background-position: 500px;
    height: 600px;
}

#center {
    position: relative;
    display: block;
    margin: -8px auto 0px auto;
    width: 1000px;
    background: black;
    height: 2500px;
}

#top {
    width: 100%;
    height: 100px;
}

HTML

<div id="wrapper">
    <div id="left"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="right"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="center">
        <div id="top"><object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dKvOYd" width="1000px" height="100px"></object></div>
    </div>
</div>

Solution 2: empty images

CSS

#wrapper {
    position: relative;
}

#left {
    position: fixed;
    left: 0;
    top: 0;
    width: 50%;
    padding-right: 500px;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    background-image: url('http://s28.postimg.org/mwcqxhk4t/left.png');
    background-repeat: no-repeat;
    background-position: right;
    height: 600px;
}

#right {
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    padding-left: 500px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url('http://s13.postimg.org/rfq1vrwx3/right.png');
    background-repeat: no-repeat;
    height: 600px;
}

#center {
    position: relative;
    display: block;
    margin: -8px auto 0px auto;
    width: 1000px;
    background: black;
    height: 2500px;
}

#top {
    width: 100%;
    height: 100px;
}

HTML

<div id="wrapper">
    <div id="left"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="right"><a href="http://goo.gl/dKvOYd"><img src="http://s14.postimg.org/ukh7iv9e9/empty.png" /></a></div>
    <div id="center">
        <div id="top"><object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dKvOYd" width="1000px" height="100px"></object></div>
    </div>
</div>

How to hide a specific div element when we reduce the zoom size of a browser

You can use CSS for that with media query like

@media only screen and (max-width: 600px){
.class-to-hide{
display: none
}
}

Or if u wants to use jQuery just locate your class with $ or

document.getElementById('myClass').css("display","none"), use $(window).height() to get size of view port and create 'if' condition where you can put your hiding code.

Hide div conditionally with only CSS?

You should be utilizing {block:PermalinkPage} and {block:IndexPage}.

{block:PermalinkPage}
<div class="icons">
    <p>This will only appear on permalink pages.</p>
</div>
{block:PermalinkPage}

You can go a step further by wrapping it in {block:Date} if you only want it to appear on posts and not pages.

hide div tag on mobile view only?

You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

EDIT: if you are using another CSS for mobile then just add the visibility: hidden; to #title_message. Hope this helps you!

How to hide a div wih jQuery dependant on screen size

You can take values from $(window) selector. For getting current value; use resize() method:

Here is working jsFiddle.

var range = 200;
//for getting begining values
var windowW = $(window).height();
var windowH = $(window).width();
console.log(windowW+'X'+windowH);

//for getting current values
$(window).resize(function() {
   var windowW = $(this).height();
   var windowH = $(this).width();
   console.log(windowW+'X'+windowH);

   if( windowW < range ) {
      $('.ele').hide();
   }else{
      $('.ele').show();
   }
});​

Edit: You can do this with pure css3 also, using this css:

@media only screen and (min-width: 767px) { .ele { display:none; } }

And i suggest to inspect these answer's, if you want to go further with jQuery scroll values: Setting CSS value limits of the window scrolling animation and How to build simple sticky navigation at the page bottum?

How do I make a div hide instead of resize when resizing the browser?

Set a min-width to the card and overflow hidden to its parent! :) it should do the trick

---

Related Topics