@media for iphone

We wish to customize the css for iphone. At the moment, text sizing is not working optimally (see image attached).

However, when using @media queries in override.css (such as the following) the iphone does not pick up on them:

Code: Select all

/*Iphone 4*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
   #support:{display:none;}
   #socialIcons, #socialIcons img {display:none;}
   .gk-intro .gkIsWrapperFixed {background-image:url("../../../images/bu_template_imgs/scaled_fp.jpg") !important;}
   .gkIsWrapper-gk_creativity .figcaption > div {left:0% !important; top: 65% !important;}
   .ccms_form_element {font-size:8pt !important;}
}
/*Iphone 4*/
@media only screen
and (min-device-width : 960px)
and (max-device-width : 640px)  {
   #support:{display:none;}
   #socialIcons, #socialIcons img {display:none;}
   .gk-intro .gkIsWrapperFixed {background-image:url("../../../images/bu_template_imgs/scaled_fp.jpg") !important;}
   .gkIsWrapper-gk_creativity .figcaption > div {left:0% !important; top: 65% !important;}
   .ccms_form_element {font-size:8pt !important;}

You need to check it with some kind of browser resize plugin (that allows to check current size of browser window). Perhaps you need to alter resolution by 1-2 px in one or another direction.
Without an access to live site I can help further.

brettullman.com. (J2.5.16)

My problem is that @media queries designed for the iphone (as in my code above), are not being picked up by an iphone. Instead, the iphone is loading override.css and the other css files.

And in which file have you put that code?

Ok, I have found it in override.css.
As I understand you have taken the code from some online site with tutorials .
Please use this code instead - it shows you how to hide #support element for all devices with width less than 580px:

Code: Select all

@media all and (max-width: 580px) {
   #support{display:none;}
}


Also, you have ":" between #support and {display:none;} which might be problem source.

Thanks, Cyberek.

Unfortunately, iphone is still showing these icons (id=#socialIcons). I added your code to the bottom of override.css, but the iphone still does not pick it up.

Please carefully check your override.css for errors (like the one I have mentioned above). They might block all declarations that are added after the error.