CODEWITHSUNDEEP
javascripthtmlcssmobile
Griffin
Griffin

Reputation: 842

Changing CSS Style of Element on Mobile Devices

Javascript newbie here.

I have an element called 'up_arrow" (picture of an up arrow). I want a script that shows the arrow on desktops but not on mobile devices. So I attempted to use the following script:

<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test( navigator.userAgent )){
    document.getElementById('up_arrow').style.visibility = 'hidden';
}
</script>

The up arrow image shows on my computer, but it also shows on my Android phone. Can someone please explain to me what error I made in my coding?

Thanks in advance!

EDIT: I have include the element 'up_arrow's code

<a href="#header-wrapper"><img id="up_arrow" class="uparrow" alt="uparrow" src="images/uparrow.png"></a>

Upvotes: 0

Views: 3387

Answers (2)

David Chase
David Chase

Reputation: 2073

you need to use style.display="none" instead of visibility

Upvotes: 0

Jiri Tobisek
Jiri Tobisek

Reputation: 579

You can use responsive design approach in your css stylesheet. For example:

#up_arrow {
  visibility: hidden
}

@media screen and (min-width: 40.5em) {
  #up_arrow {
    visibility: visible 
  }
}

will hide the up_arrow on "small screen devices" (define the "mobile device" by screen size, not the user agent). For more details, see http://www.html5rocks.com/en/mobile/responsivedesign/

Upvotes: 1

Related Questions