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 ??
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.
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');
}
});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>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.com/css/css_rwd_mediaqueries.asp