The site I am currently working on (roemlunchdinner.nl) looks fine in all major browsers but Safari on the iPhone and the iPad seems to add extra margins or padding around elements on the lower part of the page. I have tried setting the margins and padding to zero on all relevant elements, setting specific widths etc. but to no avail. I cannot reproduce this is any other browser. Anyone here has an idea what is going on here?
I am new here so am not yet allowed to post screenshots. Here are the links to the screenshot I would have liked to post:
Safari Windows screenshot
Safari iPad screenshot
Mobile Safari resizes elements based on its best guess of what's going to be readable for the user.
You can override this behaviour across the entire site by doing this in your CSS:
body { -webkit-text-size-adjust: none; }
or you can target just individual elements.
try using media queries for ipad
#media only screen and (device-width: 768px) {
your css...
}
give different width and see. Hope this helps
add css to element or related class: padding:0 #important!;
Related
I have a personal live site at http://brunomoreira.net based on the great Touchfolio theme (http://dimsemenov.com/themes/touchfolio/) for Wordpress.
Since I don't know LESS, I've changed it to use a regular style.css stylesheet.
Everything looks fine except when viewing the "Projects List" (http://brunomoreira.net/projects-list/) section on a iPhone. The masonry blocks appear slightly padded to the right and that makes them not appear 100% visible on the iPhone screen (and it lets me swipe to the right, which shouldn't be possible).
I believe it may be a problem with margins or padding in the CSS or in the masonry code itself, but can't figure it out.
Any help appreciated,
thanks.
Bruno
On the mobile version you should remove the padding from:
#primary { padding: 0!important; }
Got an issue I've been trying to solve without much luck for a while across various projects.
I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.
Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.
Has anyone experienced this issue?
I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.
So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.
This article has some great information on many different options for centering content when you don't know anything about the widths and heights:
http://css-tricks.com/centering-in-the-unknown/
It builds on from user1002464's answer quite well.
you can use display:table-cell and vertical-align:middle for the div containing the text
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
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 embedding a Google map into an html page using the <object> tag. The map is displayed inside of a set of tabs. It works fine in all major desktop browsers, android phones, and the iPhone simulator. However, it's displaying incorrectly on an iPhone 4.
http://rjthieneman.com/property/northcrest-plaza/
If you view it on an iPhone 4 or iPad, the map will not stay inside the tabs, instead it will display in the top left corner of the screen and cover the page.
Any help would be appreciated.
Update
I ended up using an <iframe> and it seems to work. I'd prefer to use the <object> tag though
Go back to using an object, and then try this CSS:
#aerial {
height: 415px;
width: 936px;
overflow: hidden;
position: relative;
}