CODEWITHSUNDEEP
javascripthtmlcssiosmobile
Yankin Deez
Yankin Deez

Reputation: 9

CSS Styling for iOS Specific Device - not working

Hi I am having a major issue with the load of my website on iPhone devices, both safari and google chrome browsers. I am trying to hide the element causing the issue but my Javascript or CSS code does not seem to be doing anything.

This is my Javascript code to detect the iPhone

<script>
    if(navigator.userAgent.match(/iPhone/)) {
    $('html').addClass('iphone');
}
</script>

and my CSS Class is just .iphone .banner-one {display: none;}

Could anyone help me with what I am doing wrong or a better way to fix it? I do NOT want size specific CSS codes as I would like the element to still show up on android/windows devices.

Upvotes: 0

Views: 401

Answers (1)

Luc
Luc

Reputation: 843

Maybe try:

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.getElementsByClassName("banner-one")[0].style.display = "none";
    }
</script>

or

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.getElementsByClassName("banner-one")[0].remove();
    }
</script>

or

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.querySelector("body > div:nth-child(2) > section:nth-child(1) > img:nth-child(9)").style.display = "none";
    }
</script>

or

<script>
    if(navigator.userAgent.match(/iPhone/)) {
        document.querySelector("body > div:nth-child(2) > section:nth-child(1) > img:nth-child(9)").remove();
    }
</script>

Upvotes: 3

Related Questions