0

I have extensive experience in CSS and I cannot figure out what's going on with this one site I'm working on:

http://lockwoodstorage.com/

Everything looks fine on all browsers but on iPhone and iPad, the content backgrounds cut off on the left side. I've tried media queries and I've tried to locate in the browsers what container could be causing this but I can't seem to figure it out.

I know this is a pretty basic question (and I always use Stack Overflow as last resort) but perhaps there is an issue here that I'm not versed in (and that could help in the forum in the future; I will update the question if it is something more complex). Any ideas would be greatly appreciated. Thank you!

EDIT

FYI, I'm not trying to make this site responsive. I'm just trying to make it display correctly on iPhone and iPad. I've also been seeing an issue where the load time is SUPER slow on iOS for some reason.

When putting this site together, I used the Twenty Twelve theme and just customized it to my liking. It wasn't a responsive theme, just a basic one.

I've put a bounty out for this. Have at it! Thanks for the help.

4

4 回答 4

5

在您的标题中，您使用的是导致此问题的 CSS float:left 属性。只需删除此 CSS 属性，您的问题就会得到解决。

然后，如果您想在标题中将元素浮动到左侧，您可以通过定位每个单独的元素来实现。例如

#logo, #nav
{
 float:left;
}

另外@<div id=page>将最大高度更改为最小高度，你们都准备好了。我希望它会帮助你。

于 2013-10-16T12:27:01.087 回答
2

您必须min-height:485px在max-height:485px

于 2013-10-14T11:55:21.130 回答
0

Mx 我也同意大卫的观点。您应该首先在移动设备上开发它，因为如果您在许多地方遇到问题，您尝试为移动设备定制它的方式将花费大量时间和精力。

如果您在少数地方遇到问题，您可以通过放置媒体查询、宽度和高度的百分比而不是固定值来解决。同样，您可以在需要的地方使用 em 而不是像素。

但是，正如我之前提到的，这将需要更多时间来定制。所以，我建议使用 Zurb Foundation 或 Twitter Bootstrap。

于 2013-10-14T11:56:23.167 回答
0

如果您要使网站具有响应性，则应首先将其构建为移动设备。这样，您可以根据设备设置每个元素的样式，以使其正确显示，并为更大的设备添加断点。

目前，您似乎已经为桌面构建了站点，然后添加了一些媒体查询来重新定位元素以尝试使其适合。这将为您创造更多的工作，并且肯定会令人沮丧。

如果您希望该网站在所有设备上看起来都不错，我建议您从移动设备开始并重新设置样式，然后逐步升级到平板电脑，然后再升级到桌面设备。

于 2013-10-09T21:53:13.563 回答