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  lt div id  fadeshow1  gt  lt  div gt    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

User · Answer

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   amp  amp  typeof      document documentElement clientWidth     undefined   amp  amp  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   lt  1026    document getElementById  fadeshow1   style display    none

User · Answer

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     lt  -- if lt IE 9  gt       lt script src  respond min js  gt  lt  script gt   lt   endif -- gt    This will allow your responsive design to function in those old versions of IE   reference

User · Answer

The easiest approach I know of is using onresize   func      window onresize   function event                        Here is a fiddle for it

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  col-sm-12 hidden-lg hidden-md hidden-xs  gt what ever you want lt  div gt

User · Answer

media only screen and  min-width  1140px    should do his job  show us your css file

User · Answer

You have to use max-width instead of min-width    lt style gt       media  max-width  1026px             test               display  none                   lt  style gt   lt div id  test  gt       lt h1 gt Test lt  h1 gt   lt  div gt

User · Answer

This should help   if screen width lt 1026    get the screen width      get element form document    elem style display     none   toggle visibility     768 px should be enough as well

[javascript] Hide div element when screen size is smaller than a specific size

Examples related to javascript

Examples related to html

Examples related to css