0

I have a link:

<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>

I dont want it to display when browser width is below 800 px. How will i do that?

  • You could add this media query: `@media (max-width: 800px) { .twitter-timeline { display: none; } }` – emmanuel Oct 16 '14 at 06:13

1 Answers1

1

You can add below media query to your CSS

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

This will hide your link when your window size is below 800px.

Please add below meta tag to your HTML head part, without this meta tag your media query will not reflect in mobile devices or device which width is less then your specified width in media query.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Chidi Mohsinali
  • 131
  • 3