Скрыть текст под шириной экрана 860 пикселей

Question

Я написал код для hide и текст под разрешением экрана 860px.. Но это не работает, где я сделал ошибку?

Пример на CodePen

Спасибо за любую помощь, ребята!

var width = $(window).width(), height = $(window).height();
if ((width >= 1024)) {
$('#px').show()
} else {
$('#px').hide()
}

p {display: inline;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container"><p id="px">www.</p>mywebsite.com</div>

Answer 1

CSS

Вы просто делаете это с помощью чистого CSS, что избавляет от необходимости загружать JavaScript или страницы. Этот способ намного лучше и поддерживается, чем использование JavaScript

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

<div id="px">Text to be hidden under 860px</div>

JavaScript / JQuery

Если вам нужно, чтобы это было сделано в JavaScript / jQuery, ваш код вышел на небольшой объем.

$(document).ready(function() {
  var width = $(window).outerWidth();
  if (width <= '860') {
    $('#px').hide();
  } else {
    $('#px').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="px">Text to be hidden under 860px</div>

Answer 2

Вам не нужен javaScript, используйте только css:

@media screen and (max-width: 1024px){
#px{display: none}
}

@media screen and (min-width: 1024px){
#px{display: block}
}