Hi, I have a site where I have used a full width graphic which stretches across the browser window, this includes a footer bar at the bottom of the page which does the same thing. While this looks fine on screen, on an iPad the whole thing pushes across to the left and is not centred. I’m sure this is caused by the full width graphic running off the edge of the page.
Could anyone give me some advise as to how to correctly set this up so that I get the full width look, but that it performs as it should in a tablet.
Exact David, but I suppose this is not the only problem on this.
Based on assumption:
To create the effect of “stretching all across the browser window width”, you placed items, making them 1900px wide and let them simply overlap the canvas by positioning them on some -500px.
This is critical (if not to say forbidden):
This is simply causing, that an iDevice is calculating the “page-width” on 1900px (based on the widest item). The rest of the page behaves “as expected” - sticking left - based on whatever width you defined as “page-width” 990px I suppose.
Please keep in mind, that this page is not stretching on all devices:
and that there is just one construction method, allowing you to do without any constraints:
Inflow - or Relative Positioned Inline Layout construction (aka Box-In-A-Box Model).
I know that there are some “hybrid methods” based on absolute positioning (drop and drag) as well - but these solutions only work by page-orientation none. I’m not aware of them.
And the last fix is simply to set your items where they belong to:
Thanks Thomas, your assumption is right, the page width is 990 and the three graphics (image, top and bottom footer) are 1900 and run off the page. I guess my question is, is there any method or steps to take to apply the inflow method to these items, an action possibly or does the entire page need to be reconstructed?
Chances increase with the use of Freeway7 and to re-arrange those items for the iPad breakpoint fixing the widths into the boundaries there.
Honestly, I haven’t tried it so I can’t ensure the just-work - I simply switched entirely to inflow many years ago, so I’m not aware of the drop’n drag method anymore.
And I can’t even ensure if other things could go wrong by “just upgrading”! So this indeed a pretty hard thing to answer recommending things without buttpain.
Thanks Thomas, agreed, sticking within the page limits is the answer. By working with David’s suggestion, I’ve managed to set it up correctly and it’s now working as it should across the various platforms. Thanks again for the suggestions.
I have a site that is having similar problem - on computer browsers my website is centred (left-right direction) as intended. On iPads, however, the page crops pretty exactly between the uppermost and lowest text (which is OK) but left-justifies in the sideways direction. I don’t have any graphics that appear to run off the page.
on computer browsers my website is centred (left-right direction) as intended. On iPads, however, the page crops pretty exactly between the uppermost and lowest text (which is OK) but left-justifies in the sideways direction. I don’t have any graphics that appear to run off the page.
Post a link to an example online and we can have a look.
