Websites don't look correct on iPhone, or when desktop browser window is not wide enough.

[pageliner 0]

Hi, I'm using page lines 2.1.6, developer edition. It seems that my websites don't look correct on my iPhone. The problem also occurs on when viewing through a desktop browser whose window isn't wide enough. The layout of my webpage is set to "Responsive with Pixel Width". On my desktop, when the browser window is wide enough to accommodate the entire page, everything looks ok. As I reduce the width of the window, the layout changes to accommodate the new width. When the width is too short, the text in my "feature" overlaps with the feature image (Feature layout is text at bottom). This makes the page look unprofessional. Ideally, below a certain width the page layout should no longer change, but remain constant. Since the iPhone resolution is much less than a typical desktop, the overlap occurs, and hence the website does not look professional. Checking or unchecking "Disable Mobile View" makes no difference. It seems that the webpages look more or less the same on my iPhone or desktop. The difference being the width of browser window causing items to flow / shift on the iPhone. I haven't made any changes to the default css of page lines. I am using Template 1. I haven't made any changes to the source code. Is there some setting I can change to fix this?

[Danny+ 1,327]

Hi, Can you provide a link to your website please. As I have just tried this on my test site and my Feature and Feature text all display responsively.

[pageliner 0]

Hi Danny, At this time I can't send you the link as the site is supposed to be internal only for now. Perhaps there is some kind of settings change I need to make? When the layout is set to either of the "responsive" options, the site responds to changes in browser width. The problem is that when the width is too low, the text from the "feature" overlaps with the image used for the feature. This happens regardless of "disable mobile view" is checked or not. It happens both on my desktop browser as well as iPod touch. If I change the layout settings to "fixed width", then I no longer have the overlap problem, but the page looks the same on the desktop & mobile devices (iPod touch etc), regardless of whether "disable mobile view" is checked or not.

[catrina 103]

It'd be difficult to see what could be wrong without a live link. Would you be more comfortable sending the link privately (rather than posting the link on the forum)?

[pageliner 0]

Hi Catrina, I can't send out links at this time. I haven't changed any code that comes with page lines. My page lines settings that I think are relevant: How should layout be handled: Responsive with pixel width Disable mobile view: unchecked Select default layout: First option (One big black box. No blue columns). Page template: Template 1 Page setup: Template 1 - Hide Boxes (checked) Features: - Everything is blank or default, except for: Number of features to show: 9 (I actually have only 3 features in the feature set though) Sort Method: Date Sort Order: Ascending Feature set: Feature Navigation mode: Feature Thumbs The media images in my features are 1000 x 330 px. Thumbnails are 50 x 30 px Text on Bottom Black text - No Feature Background - No Overlay Other plugins I use: W3 - total cache Contact form 7 Automatic Wordpress Backup WP-Optimize.

[Danny+ 1,327]

Hi That Guy, Do you have the Feature slider set to Static Height or Aspect Ratio ? Also as you can not provide a link, would it be possible to take a couple of screenshots or record a screencast please. You can use Jing to do this. http://www.techsmith.com/jing.html

[pageliner 0]

Hi Danny, The feature slider wasn't set to either, so I guess it was using the default. I thought that it should look ok with default settings (nothing selected), but I guess that may have been the problem. If I set the feature to use aspect ratio, and set it to (2.3). The problem remains. It looks ok in a wide browser window, but as the width of the browser window shrinks, the feature text moves and eventually is on top of the image (when the width is too small) If I set the feature to a static height (400px). Then the situation improves - the feature text no longer overlaps with the feature media image. But the layout doesn't look very good. If I set the static height and choose "disable mobile view", then I get the best result -> On my iPod touch the site looks as it should (although, it is zoomed out). But the layout finally looks correct. With these settings, on a desktop browser the layout changes if I shrink the browser width too much. This seems good enough for now. I guess my only concern is that I don't know what this would look like on a mobile phone which has a resolution less than the non-retina iPhone. But perhaps I shouldn't worry about that. Thanks!