0

I am working with this page http://lifecrypter.io/ and I am using CSS to hide and show elements according to device screen resolution.

Code here:

@media only screen and (max-width: 2000px) {

    .one{display:block !important; }
    .two{display:none !important;}
    .three{display:none !important;}

}

@media only screen and  (max-width: 920px) {

    .one{display:none !important;}
    .two{display:block  !important;}
    .three{display:none !important;}

}

@media only screen and (max-width: 479px) {

    .one{display:none !important;}
    .two{display:none !important;}
    .three{display:block !important;}

}

I tested de site with Responsinator and aparently it was working fine but then I tested de site with a cellphone and:

enter image description here

The hide and show element properties were not working. I tested with several phones and the result were the same.

Doing several test I found this:

[http://lifecrypter.io/] close the website inside a frameset tag

enter image description here

Testing on mobile device the original site link in S3

enter image description here

Now I can see the hide and show properties are working fine.

I tried to modify the meta tags of the page but enter image description here

The meta tags show before are the only ones I can modify

There is any way to fix this?

Rivero Felipe
  • 177
  • 2
  • 18
  • Please provide a [MCVE] in the question itself. A link to a page that you are working is useless to us now as it may change as we try to solve the issue for you. It is also useless to future uses once you fix the issue. By breaking the problem into its smallest reproducible state, you may find the solution your self. – Jon P Feb 12 '18 at 03:11
  • The next question is why are you using images for content? This is just a bad practice. You have no accessibility and you have no crawlable content from an SEO perspective. – Jon P Feb 12 '18 at 03:16
  • 1
    Please, don't use `!important` for everything; it's just bad practice. Also, using `frameset` is very 1990s. – Heretic Monkey Feb 12 '18 at 03:30

1 Answers1

0

Try adding a viewport meta tag. 

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

Possible duplicate on this question. @media query not working in mobile. Works fine in Chrome . Hope it Helps!

grey.dim
  • 156
  • 6