August 28, 2012 at 3:59 pm #15788
It seems like the screen is being cut on the right side when the website is viewed on mobile devices.
How can I prevent this from happening? I really need for the entire website to show in its full dimensions on tablets and phones.
Thank you!August 29, 2012 at 12:23 pm #89006
Are you running the latest version of the Flashlight theme – 1.7? In the meantime, I’m going to flag the rest of the support team to this thread since I don’t have an iPad or iPhone.
MyaAugust 30, 2012 at 4:00 am #89007August 30, 2012 at 5:09 am #89008
Try to add following code to header.php – insert it before the closing head tag:
<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
PeterAugust 30, 2012 at 9:31 pm #89009
That actually maxes out the size of just the menu bar, when I enter the script, it blows up the left menu navigation bar and cuts out everything else. Any other suggestions?
P.S. Awesome support so far!!!September 1, 2012 at 7:17 am #89010September 1, 2012 at 7:42 pm #89011September 1, 2012 at 7:43 pm #89012September 1, 2012 at 11:54 pm #89013
I would like to view your site in http://quirktools.com/screenfly/ but it is on maintenance mode.
IsmaelSeptember 2, 2012 at 4:24 am #89014
Maintenance mode is turned off, please check: http://www.vincistarshop.com and please let me know as soon as possible as I’d like to have maintenance mode back on as soon as possible.
Thanks!September 2, 2012 at 6:23 am #89015
Try to add following code to css/custom.css or the quick css field:
PeterSeptember 2, 2012 at 5:30 pm #89016
Unfortunately that didn’t do the trick either :(
Do you have any other suggestions?
Thanks so much!September 3, 2012 at 5:37 am #89017
You can try to change the scale value a bit (eg to 0.9) like:
<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9">
PeterSeptember 3, 2012 at 9:10 am #89018
Please don’t forget to do what Peter asked you above.
Does the demo version of Flashlight http://www.kriesi.at/themedemo/?theme=flashlight cause a similar problem on ipad? How about these 4 modified flashlight powered websites?
NickSeptember 4, 2012 at 3:43 am #89019
Where should I add <!– mobile setting –>
<meta name=”viewport” content=”width=device-width, initial-scale=0.9, maximum-scale=0.9″>?
Which PHP file do I need to add it to?
Also, all 4 modified flashlight powered websites listed above were showing in the same, cropped way as mine on my iPhone.
It doesn’t show the full home background picture; instead it cuts off the right portion significantly.
Thank you!September 4, 2012 at 12:18 pm #89020
Please edit header.php file at the base of your theme, and add the two lines immediately *after* you see
However, if every flashlight power website looks broken on your ipad, I am afraid the problem is with your ipad. It has been tested and used by thousands with an iPad and this is the first time such a problem was reported. I don’t know much about ios, but would you try re-installing your browser please.
NickSeptember 8, 2012 at 3:33 pm #89021
I am having the same problem, see my site here: http://www.doubleudoubleo.com. It appears fine on the home page but the background appear cropped when it gets to the portfolio page and single pages.September 8, 2012 at 6:45 pm #89022
I asked a friend with an iPad to help me out, and we did find the cropping problem discussed in this thread.
The problem is answered here : http://stackoverflow.com/questions/2966803/a-way-to-correct-background-scaling-in-ipads-safari
You can try using the ‘quick fix’ from the above link (Answer 2 from above link described more thoroughly here http://www.webdesigndev.com/dreamweaver/create-a-full-page-background-image-with-css3)
or add specific CSS and images targeting iPad. (Answer 1 from stackoverflow link above)
In a nutshell iPad expects all background images to be proportional to its resolution 1024 x 768, while your image is 1280 width x 720height. If you crop it to the ‘correct’ size ratio= (1024/768) = (x/720) which when solved x=(720*1024)/768 … x = 960px.
So if you crop your image from 1280×720 to 960 width x 720 height (or any image that has the same aspect ratio as 1024×768), then iPad will accept the images without problems.
The topic ‘Display on iPad & iPhone’ is closed to new replies.