61

I have a div element that I want to hide when the width of the browser is less than or equal to 1026px. Is this possible to do with the css: @media only screen and (min-width: 1140px) {} If it isn't possible with css, Is there any alternative?

Extra info: When the div element is hidden, I don't want a blank white gap. I'd like the page to flow as it would if I deleted the div element entirely from the code.

The div I am hiding is <div id="fadeshow1"></div>.

HTML5 Doctype.

I used javascript to place a gallery into that div.


I want it to look like this when it is bigger than 1026px width: http://i.stack.imgur.com/REBPi.png


I want it to look like this when it is less than 1026px width: http://i.stack.imgur.com/XdiL4.png

2
  • is this question still active? Dec 16, 2014 at 2:41
  • @VitorinoFernandes: I'm still getting votes on my answer, so, yea it is.
    – Cerbrus
    Mar 24, 2015 at 10:04

9 Answers 9

169
+100

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.

2
  • This is working like charm!!! if you have class then just use . instead of # as per CSS rule like as follow. @media only screen and (max-width: 1026px) { .fadeshow1 { display: none; } } Jul 23, 2020 at 8:27
  • Actually when screen is smaller or equal to 'max-width'. Aug 6, 2022 at 0:48
24
@media only screen and (max-width: 1026px) { 
  #fadeshow1 { 
    display: none; 
  } 
}

Any time the screen is less than 1026 pixels wide, anything inside the { } will apply.

Some browsers don't support media queries. You can get round this using a javascript library like Respond.JS

0
10

if you are using bootstrap u can just use the hidden-sm ( lg or md or xs) depending on what u want. u can then go into the css file and specify the percentages u want it to show on. in the sample below it will be hiding on large screens, medium ones and extra small ones but show on small screens by taking half of the screen.

<div class="col-sm-12 hidden-lg hidden-md hidden-xs">what ever you want</div>
1
  • Bootstrap by defualt has this css file with all the @media screen sizes for extra small, small,medium and large set all u need to do is adjust them to ur needs. even if you are not using bootstrap u can copy and paste in ur css file. link to file -> [link](drive.google.com/file/d/0B5X-yh_L2HHNZ2gyejdXTWRCc28/… ) Mar 29, 2017 at 11:46
7

I don't know about CSS but this Javascript code should work:

    function getBrowserSize(){
       var w, h;

         if(typeof window.innerWidth != 'undefined')
         {
          w = window.innerWidth; //other browsers
          h = window.innerHeight;
         } 
         else if(typeof document.documentElement != 'undefined' && typeof      document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) 
         {
          w =  document.documentElement.clientWidth; //IE
          h = document.documentElement.clientHeight;
         }
         else{
          w = document.body.clientWidth; //IE
          h = document.body.clientHeight;
         }
       return {'width':w, 'height': h};
}

if(parseInt(getBrowserSize().width) < 1026){
 document.getElementById("fadeshow1").style.display = "none";
}
2
  • 2
    Using @media in css is the easier. Javascript makes this task more complicated.
    – user4051844
    Dec 15, 2014 at 15:24
  • I'm new to web applications so correct me if I'm wrong but isn't it better to use ==! instead of =! ?
    – Touk
    Apr 28, 2017 at 9:35
3

You simply need to use a media query in CSS to accomplish this.

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

Unfortunately some browsers do not support @media (looking at you IE8 and below). In those cases, you have a few options, but the most common is Respond.js which is a lightweight polyfill for min/max-width CSS3 Media Queries.

<!--[if lt IE 9]>
    <script src="respond.min.js"></script>
<![endif]-->

This will allow your responsive design to function in those old versions of IE.
*reference

2

This should help:

if(screen.width<1026){//get the screen width
   //get element form document
   elem.style.display == 'none'//toggle visibility
}

768 px should be enough as well

1
  • 2
    Visibility:hidden makes the div invisible but doesn't get rid of the area it took up on the page, so OP would have a big blank block in the middle of his site. Display: none is better
    – Andy
    Nov 20, 2012 at 15:26
1

You have to use max-width instead of min-width.

<style>
    @media (max-width: 1026px) {
        #test {
            display: none;
        }
    }
</style>
<div id="test">
    <h1>Test</h1>
</div>
1
@media only screen and (min-width: 1140px)

should do his job, show us your css file

0

The easiest approach I know of is using onresize() func:

   window.onresize = function(event) {
        ...
    }

Here is a fiddle for it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.