My site is: alwaysriding.co.uk
I had updated and use media query to make it displays better on smartphone but I am having some problem with zoom in, zoom out.
When you go to my site with smartphone, you will see the horizontal scrollbar althought I had fixed the width = 480px.
You can see my css if you resize your browser windows.
Thanks in advance.
Chu
Related
When I look at my page on an iPhone, I see the page in a zoomed out mode. This is fine, and all dimensions fit to each other of boxes etc.
But not the text. The text size is bigger compared to other sizes on this zoomed view.
This is ok for the text content on the page. Then it's easier to read the text on the phone, and the content text is not fixed but floats and fits to the container.
But the text on buttons as in the main menu on the page is also not reduced in size by the same percentage. And here there is a problem - the main menu bar is then suddenly to wide because everything else is shrunk more than this.
My menu's width is not fixed but fits to the text-width. So when the text-width suddenly is larger than usual, the menu bar is wider than usual too.
I can't give a screen shot, but I hope this is a known issue. As an example see this simulator (it seems to show the problem as on the iPhone):
http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php?u=http://w3schools.com#
And compare the normal site: http://w3schools.com/
This site also have this problem with e.g. the menu on the right on the page.
Mabye text-size-adjust can help you.
.css {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
This will allow your text to be smaller than the default value your phones browser allow.
Note: test it on a real phone since "There is a bug in Webkit-based desktop browsers. If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page"
https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust
I have just launched a beta version of my Facebook Canvas Application called Pazooza (http://apps.facebook.com/pazooza), but I am having trouble getting rid of the horizontal and vertical scrollbars in Firefox. In my app settings canvas width is set to 760px and canvas height to fluid. Does somebody have a canvas html template that they have used that I can try and get to work in my site where firefox doesn't show the horizontal and vertical scrollbars? My main html table that holds all other content is set to 740px, so I don't see how this voilates the extra width put on by a horizontal scrollbar.
Any help or advice would be appreciated.
I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}
One of my designers sliced up a PSD & for some reason the page isn't rendering on iPhones or iPads. The div that contains a feedback link is the only thing that is visible. I've spent some time on the issue, but can't seem to find the issue. Have a look here: http://bit.ly/jNcJ47
I get the same problem in Safari on my Mac. I messed around with the Web Inspector for a few minutes and found out that when I disable the sidebar1 element's height: attribute, the content appears.
that's because the width occupied by the sidebar1 div is making the rest drop to the bottom! and since your container div has the overflow hidden, it doesn't even show the other floatted divs that dropped.
I advise positioning that div absolutelly and you're done.
I am having the weirdest problem. I'm trying to make a page that fits a resolution of:
width: 640;
height: 960;
for the iphone. But there is a hidden element that I can't access with the Developer toolbar or Firebug that is adding an extra 100pixels to the right of my page.
I've set the correct height and width for the html, body, and main containers but I'm still having the same issue.
You can replicate the problem by going to the following page and resizing your screen just below 740px wide. When you do this you see the horizontal scrollbar popup around 740 pixels. Here's an example page with the issue.
The scrollbar shouldnt popup until the window is resized down to a 640 pixel width because thats what I have all the elements assigned to.
The main overall issue is that when viewed on the iphone4 there is a 100 pixel gap on the right side of the screen that no matter what i do I cant get rid of because some element is making the page 740px width instead of 640.
My boss and I have been working on this for hours and still cant figure out what is causing that extra 100 pixels on the right.
Any suggestions would be greatly appreciated.
Place overflow: hidden on your HTML CSS attributes. Not sure where that element is coming from, but that will prevent anything from making scroll bars appear.