Viewing Mobile Page issues

Mobile Page issues



User: pumpkin 12 years ago
So, I've created a mobile page for the index page of my website. For the mobile page I chose a width of 640px since that's the width of the iPhone display. I thought that'd be a good starting point. But whenever I publish the page and look at it on my iPhone 4, it looks like this:




I have no idea why it shows the green background and leaves this space to the right of the actual page. Any ideas?

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>

IMG_0026.PNG
User: Yelena 12 years ago
I thought that the best width is supposed to be 480 for mobile, not 640. Mine looks great with that setting.

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: pumpkin 12 years ago
Well it worked with 640px for about an hour, until I published the site again with some changes (not to the width though). And the iPhone4 has a retina display already, so does that change the way we design for mobile sites too?

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>
User: Yelena 12 years ago
Sorry, I have no idea...I do have an IPhone 4S and two sites set to 480 width look perfect....

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: Roddy 12 years ago
The width would depend on whether you are designing for a specific iPhone model or whether you want the site to appear OK on most smart phones. In the later case a width of 320px is better.

@pumpkin: There's something wrong with your layout. When you load the mobile site in a desktop browser a horizontal scrollbar appears as soon as the browser width falls below about 940px. This obviously shouldn't happen!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: pumpkin 12 years ago
Alright, I'll try 320px, but how do I get my navigation to show up properly? Especially when it comes to dropdown menus?

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>
User: Roddy 12 years ago
You would use a mobile menu...

http://roddymckay.com/EasyWeb/mobile/index.html

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: pumpkin 12 years ago
Still not working. And now there's the horizontal scroll bar showing up at about 620px width. There's nothing (!) that is wider than the 320px the page has in EasyWeb.

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>
User: Yelena 12 years ago
Clear your browser cache?

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: pumpkin 12 years ago
Done several times. How does singkehlchen.de look on your mobile device, Yelena?

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>
User: Roddy 12 years ago
Have you tried doing Command A to see if there is on object on the page causing this?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Yelena 12 years ago
Same as yours, not centered.

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: pumpkin 12 years ago
[quote="Roddy":ptrsiy85]Have you tried doing Command A to see if there is on object on the page causing this?[/quote:ptrsiy85]
Nothing there. Not in the browser and not in EasyWeb (usually cmd-shift-l helps when using EasyWeb, but everything is within the 320px). And still that annoying border.

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>
User: Yelena 12 years ago
I had that problem and created a new site. There seemed to be a bug - maybe some conflict after updating to Beta 20...x

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21" OS X 10.10.3
User: pumpkin 12 years ago
I deleted the mobile page and rebuilt it. No changes. The page is still smaller on the iPhone4 than it should be. 1/3rd of the screen is filled with the green background.

-------------------------------
Darian
new to web design
______________________
My websites: <b>Vocal Affairs</b> // <b>Singkehlchen</b>


Post Reply
You must login or signup to post.