CODEWITHSUNDEEP
cssmobile
resriel
resriel

Reputation: 57

Mobile-incompatibility with CSS

Something to do with this code is making my website not work on mobile. I have a div in the first line of the body in order to set a rotating set of backgrounds when loaded and when clicked, which are blurred, and then the real image upfront in the span. I wish I knew what was wrong with the code. But, if I can't find a solution, is there any way to disable a certain range of my CSS code on mobile platforms?

div {
  height:100%;
  width:100%;
  background-size:cover;
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  -o-filter: blur(50px);
  -ms-filter: blur(50px);
  filter: blur(50px);
  position: absolute;
  left:0;
  top: 0;
}

span {
  z-index:9999;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0x);
  filter: blur(0px);
}

Upvotes: 3

Views: 43

Answers (1)

Jerad Rutnam
Jerad Rutnam

Reputation: 1546

Well, you can use @media queries if you are referring the mobile platform using the screen size. Else you can use javascript to inject an attribute to top of the html tag and by using it you can isolate your css code specific to target devices.

e.g. https://github.com/rafaelp/css_browser_selector

Upvotes: 1

Related Questions