Here is a screen shot to show exactly what I mean:
The green vertical line on the right image shows the space that appears when viewed on iPhone Safari. I don't think this has anything to do with Safari since I've seen other websites without that space. Is this something wrong with the css? If so, what's the problem?
The actual site is shown in the address bar of the image if viewing the site live helps.
Try changing the width of this div element to this...
#tweet-bar-content {
width: 970px;
}
Related
I have created a website using Adobe Muse and have uploaded the site to the ftp server . The website is live and is as designed when looked via a desktop. But when the same site is being viewed from a mobile, the entire page is getting left aligned and there is a gap to the right side. I even made a phone layout and uploaded the same to the ftp server and the problem still persists. Ive googled a lot and inserted html code into the metadata to make the site centered but in vain. Nothing works . I have a tight deadline and would really be grateful for any quick help.
maybe your images are placed in pixels... If I am right
try using a rectangular tool... fill it with image then make the width 100%
to view the sample image click here
The size of mobile layout in muse is fix... I think the mobile you are using have different size... so just start using % on placing the images like the background etc.
There's a setting that was causing my content to be left-aligned in the phone layout.
Click Page > Page Properties
There's an un-marked button to the far right of Padding - click this and set it to centered. By default it is left-aligned.
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
Prnt screen of the problem
Hi there, I need some advice. As you can see in the image, I have iframe on my website (width 220px) and space within the box is not fully used. I can see margin on the right side (red arrows), where the scroll bar is.
I need to stretch out the content into the full width of the box. (Delete the space between the arrows)
Can I do something about that? Is that a FB bug?
THX for advices.
It looks like the word „labyrinth” would not really fit on the line where your arrows are – if so, then there’s no „bug” at all, it’s just automatic line breaking as is totally common in HTML displaying.
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.