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

Question

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:

I want it to look like this when it is less than 1026px width:

@VitorinoFernandes: I'm still getting votes on my answer, so, yea it is. — Cerbrus
– Cerbrus, Commented Mar 24, 2015 at 10:04

mekb · Accepted Answer · 2019-07-23 06:40:38Z

188

+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.

edited Jul 23, 2019 at 6:40

mekb

59210 silver badges22 bronze badges

answered Nov 20, 2012 at 15:19

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Atul Baldaniya Over a year ago

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; } }

hsn-mnj Over a year ago

Actually when screen is smaller or equal to 'max-width'.

Andy · Accepted Answer · 2012-11-20 15:34:26Z

25

@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

edited Nov 20, 2012 at 15:34

answered Nov 20, 2012 at 15:19

Andy

14.6k3 gold badges55 silver badges76 bronze badges

Comments

Kabengwa Patrick · Accepted Answer · 2017-03-29 11:06:52Z

11

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>

answered Mar 29, 2017 at 11:06

Kabengwa Patrick

3683 silver badges17 bronze badges

1 Comment

Kabengwa Patrick Over a year ago

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/… )

NaijaProgrammer · Accepted Answer · 2012-11-20 15:27:18Z

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";
}

Using @media in css is the easier. Javascript makes this task more complicated.
I'm new to web applications so correct me if I'm wrong but isn't it better to use ==! instead of =! ?

Community · Accepted Answer · 2017-05-23 11:33:15Z

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

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Dec 16, 2014 at 14:26

JRulle

7,5566 gold badges42 silver badges64 bronze badges

Comments

palamunder · Accepted Answer · 2018-02-21 12:35:11Z

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

edited Feb 21, 2018 at 12:35

palamunder

2,7751 gold badge23 silver badges22 bronze badges

answered Nov 20, 2012 at 15:25

Vaibhav

7232 gold badges7 silver badges19 bronze badges

1 Comment

Andy Over a year ago

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

user4051844 · Accepted Answer · 2014-12-15 15:31:41Z

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>

answered Dec 15, 2014 at 15:31

user4051844

Comments

HK boy · Accepted Answer · 2020-02-07 09:00:14Z

1

@media only screen and (min-width: 1140px)

should do his job, show us your css file

edited Feb 7, 2020 at 9:00

HK boy

1,40411 gold badges21 silver badges27 bronze badges

answered Nov 20, 2012 at 15:19

Mirco

3,0165 gold badges37 silver badges59 bronze badges

Comments

DeeDub · Accepted Answer · 2012-11-20 15:25:53Z

0

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

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

Here is a fiddle for it

answered Nov 20, 2012 at 15:25

DeeDub

1,6621 gold badge12 silver badges18 bronze badges

Comments

Maarten Coppens · Accepted Answer · 2023-07-08 17:06:06Z

This is kind of a hack but it works well and it's all CSS:

#fadeshow1 {
  /**
Sets the max-width to 0px if the calculation
if right statement is negative thus rendering it invisible.
                  |
                  |   120px is the size you want the width to be set to 0px
                  |   if the calc(100% - 120px) is negative it sets it to 0px
                  |   if the calc(100% - 120px) is positive it sets it to calc(100% - 120px)
                  |                 |
                  |                 |
                  |                 |     Multiply by a very high number always greater than the width
                  |                 |     |
                  V                 v     v
  */
  max-width: max(0px, calc((100% - 120px) * 999));
  /** Necessart otherwise it doesn't hide the element */
  overflow: hidden;
}

I picked this up from this article: https://medium.com/swlh/hiding-an-element-when-there-is-no-enough-space-thanos-snap-technique-8a11e31267c0.

Collectives™ on Stack Overflow

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

10 Answers 10

2 Comments

Comments

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

1 Comment

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related