Im Lost. Trying to make page show correctly on iphone

Permalink
Ive gone through the forums and looked at andrews display setting for iphone.

my website is carolinamayhemfastpitch.com , what happens is the fonts arent the right size and on an iphone its all jumbled.

Im not quite following the tutorial correctly. un inderstand how to copy the css file to the themes and rename it , but from there im lost, im not sure where exactly i need to go and edit to get it to display right and add in the information, exactly which portion of the css...i didnt see one for the body.

Its rookie noob but any help would be nice

Any advice?

 
Ekko replied on at Permalink Reply
Ekko
Are you using the guide for c5 touch or is this from another guide ? If it is from another guide could you link to what guide you are looking at ?
vanhollymorgan replied on at Permalink Reply
Here is the link i was going by:

http://www.concrete5.org/community/forums/chat/properly-display-ful...


When you build a site using css, the iphone can sometimes display elements larger than they are supposed to be. There is nothing wrong with your css but its how the iPhone handles some elements.

To stop this:

1. copy your sites css file and call it 'iphone.css'. Place in your themes folder.

(im unsure where to do this at, not sure of which tag)
2. Within the body tag of the css place this line in: '-webkit-text-size-adjust: none;'
This forces the iPhone to keeps the site elements as they should. This does not stop the scaling of the site using the pinch method etc.
(same here)
3. Within the head place this line of code:

<link rel="stylesheet" media="only screen and (max-device-width: 980px)" type="text/css" href="<?php echo $this->getStyleSheet('iphone.css')?>" />

This lets the iPhone know to load up the new css file.
Steevb replied on at Permalink Reply
Steevb
There are lots of things you can do, but you do not need a separate stylesheet.

You site is not completely 'responsive', so that extra sheet wont help.

What you could do is to add this to your header.php:
<meta name = "viewport" content = "width = device-width">


And add this to your stylesheet:
@media  (max-width: 767px) {
body {
   -webkit-text-size-adjust: none;
   }


There are many other options, such as making allowances for retina display and rotation. but that's for another day.