Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #15788

    Hello,

    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!

    #89006

    Hi mimishkoum,

    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.

    Regards,

    Mya

    #89007

    Hi!

    Any further feedback on this issue?

    Thanks!

    #89008

    Hey!

    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">

    Regards,

    Peter

    #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?

    Thank you!

    P.S. Awesome support so far!!!

    #89010

    Hi!

    Can you post a link to your website please?

    Regards,

    Peter

    #89011

    It’s vincistarshop.com

    Thanks!

    #89012
    #89013

    Hi,

    I would like to view your site in http://quirktools.com/screenfly/ but it is on maintenance mode.

    Regards,

    Ismael

    #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!

    #89015

    Hey!

    Try to add following code to css/custom.css or the quick css field:

    body {
    overflow-x: auto;
    }

    Regards,

    Peter

    #89016

    Unfortunately that didn’t do the trick either :(

    Do you have any other suggestions?

    Thanks so much!

    #89017

    Hey!

    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">

    Best regards,

    Peter

    #89018

    Hi,

    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?

    http://goo.gl/C4LR1http://goo.gl/uXOaphttp://goo.gl/456eWhttp://goo.gl/lc8Af

    Thanks,

    Nick

    #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!

    #89020

    Hi,

    Please edit header.php file at the base of your theme, and add the two lines immediately *after* you see

    <head>

    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.

    Thanks,

    Nick

    #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.

    #89022

    Hi,

    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.

    Thanks,

    Nick

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Display on iPad & iPhone’ is closed to new replies.