I want to a div to be hidden it the screen size is bigger than 700px and shown only if the screen size is less than 700 px;

Here is the code i'm trying to implement with using jQuery 3

jQuery(document).ready(function() {
    if ((screen.width>701)) {
        $(".mobile-section").css('display', 'none'); $(".yourClass").hide();
    }elseif ((screen.width<=699))  {
        $(".mobile-section").css('display', 'block'); 
    }
});

It's not working --- am I doing anything wrong ??

I want to a div to be hidden it the screen size is bigger than 700px and shown only if the screen size is less than 700 px;

Here is the code i'm trying to implement with using jQuery 3

jQuery(document).ready(function() {
    if ((screen.width>701)) {
        $(".mobile-section").css('display', 'none'); $(".yourClass").hide();
    }elseif ((screen.width<=699))  {
        $(".mobile-section").css('display', 'block'); 
    }
});

It's not working --- am I doing anything wrong ??

• javascript
• jquery
• css

• 2 use css media query – David Commented Mar 16, 2017 at 11:03

4 Answers 4

Makes no sense really to use javscript/JQuery here if that is all you want try with CSS media queries like

.mobile-section {
  display: none;
  background-color: orange;
}

@media screen and (max-width: 700px) {
  .mobile-section {
    display: block;
  }
}

<div class="mobile-section">
  hello mobile section
</div>

Check out this fildde and resize the viewable area

width() is a function supported by jQuery providing the width property of e.g. document or window elements. In your case it refers to the document.

http://api.jquery./width/

An explanation of the difference between jQuery's .width() and screen.width would be good - screen.width is a native DOM property and it returns the width of the whole screen, e.g. if you have a monitor with 1920x1200 resolution, screen.width will return 1920.

$(document).ready(function() {
  if (($(this).width() > 701)) {
    $(".mobile-section").css('display', 'none');
    $(".yourClass").hide();
  }
  else {
    $(".mobile-section").css('display', 'block');
  }
});

Use media queries, no JavaScript required.

@media only screen and (min-width: 700px) {
    #hideMe{
      display:none;
    }
}

<div id="hideMe">This should only be displayed on smaller than 700px screens</div>

You can read about media queries here: https://www.w3schools./css/css_rwd_mediaqueries.asp

Try this,

// Returns width of browser viewport
$( window ).width();

// Returns width of HTML document
$( document ).width();

$(document).ready(function() {
    if ($(window).width() > 701) {
        $(".mobile-section").css('display', 'none'); 
    } else if ($(window).width() <= 700)  {
        $(".mobile-section").css('display', 'block'); 
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width : 100px; height:100px;border:solid 1px red;" class="mobile-section">
</div>

Hope this helps.