Failing to target iPhone

Support
#1

Hi

I’m trying to target (eg) the iPhone with different CSS on https://dev.reachuk.org/fundraising/challenge-events/, eg to reduce the size of the h1 heading and shrink the images on the right (ViaVelo etc). I have this in the page’s CSS:

/* iPhone 8 and smaller*/
@media only screen 
and (max-device-width : 667px) {
  .attachment-large.size-large.wp-post-image {
    width: 10%;
  }
  h1 {
    font-size: 1em; 
  }
}

… but it doesn’t work. Can you tell me where I’m going wrong?

Thanks
Mike.

#2

Hi Mike,

Thanks for reaching out.

The headlines for that page are h2, so please change your CSS to h2 instead of h1. The CSS for the image is working, I tried it and works but I don’t see the CSS added at all. Please deactivate any of your optimization and minification to make sure your changes appear in real time.

And change this

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

to this

@media (max-width : 667px) {

And please activate optimization and minification just once you’re finished developing your site. It’s only recommended on production mode.

Thanks!

#3

Perfect - thank you very much!

#4

Hello Mike,

If you want to read more about the difference between max-device-width and max-width, please check here.

Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.