Не отображать ссылку, если ниже определенной ширины браузера

Question

У меня есть ссылка:

<a class="twitter-timeline"  href="https://twitter.com/vhakhikhang" data-widget-id="520463403060432896">Tweets by @vhakhikhang</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Я не хочу, чтобы он отображался, когда ширина браузера меньше 800 пикселей. Как я это сделаю?

Answer 1

Вы можете добавить ниже медиа-запрос к вашему CSS

@media only screen and (max-width: 800px) {
   .twitter-timeline { display: none;}
}

Это будет скрывать вашу ссылку, когда ваш размер окна ниже 800 пикселей.

Добавьте метатег ниже к своей головной части HTML, без этого метатега ваш медиа-запрос не будет отражаться на мобильных устройствах или устройствах, ширина которых меньше указанной вами ширины в медиа-запросе.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">