Newbie with Layer setup issue

[Epoc]

Hi, newbie to this software so please be patient.

Here's what I am trying to do. I want a layer with images and text to have a background color and I want that background color to span the width of the viewers browser. I want all the layers content to be centered. I can get this to work fine in IE, Chrome and Firefox on a PC but am struggling to get the same output in Safari on an iPad.

Here's what I want to do: http://www.wysiwygwebbuilder.com/layer_test3.html

Here's my effort. Renders fine in all browsers on a PC: http://www.ausvts.com.au/test/index.html

Here's what it looks like on my Ipad:



As you can see, the background layer is not showing right across the browser window. I have tried a number of setting but none result in what I want. Here's the layer settings:



I am sure its something simple but I just can't work it out.

Thank-you for any input.
Epoc

[protectourlands]

Make the layer width 100% of the page width. It looks like your page width is 1200 but your layer is 1250. Make the layer 1200 wide. Also uncheck Relative Horizontal Position.

[Pablo]

I also think the layer is too wide.
And you probably should add breakpoints to optimize the layout for smaller screens.

[Epoc]

Make the layer width 100% of the page width. It looks like your page width is 1200 but your layer is 1250. Make the layer 1200 wide. Also uncheck Relative Horizontal Position.

Thank-you for your input. I have made the layer 1200 wide and unchecked Relative Horizontal Position but am still experiencing the same issue.

[Epoc]

I also think the layer is too wide.
And you probably should add breakpoints to optimize the layout for smaller screens.

I have corrected as per protectourlands suggestions but it did not fix the problem.

Breakpoints will come if and when I sort this issue.

[Pablo]

Which phage did you update?
The layer is still wider than the viewport.

[Epoc]

Which phage did you update?
The layer is still wider than the viewport.

My apologies I uploaded it to a different folder thinking Safari might be caching a file.

I have updated the posted link with the new files:

www.ausvts.com.au/test/index.html

[Pablo]

I'm sorry, but the layout is still not correct.
The layer is wider than 100%

[protectourlands]

Epoc

Like Pablo says, your layer is still too wide. You need to match the layer width to your page width, which according to your screenshot is 1200 px wide.

An easy way to do this is to right click on the layer, Center In Page, Make width same as page width.

Then, as Pablo states, you will have to add breakpoints and adjust the layer width to each of the breakpoints, if you wish the layout to look good on mobile devices like tablets and phones.

[Epoc]

I'm sorry, but the layout is still not correct.
The layer is wider than 100%

I am not sure what you are seeing but I assure you, the layer is now 1200 wide. This is taken from from Firefox's view source code on the test page I linked too.
<div id="Layer9_Container" style="width:1200px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">

[Epoc]

Epoc

Like Pablo says, your layer is still too wide. You need to match the layer width to your page width, which according to your screenshot is 1200 px wide.

An easy way to do this is to right click on the layer, Center In Page, Make width same as page width.

Then, as Pablo states, you will have to add breakpoints and adjust the layer width to each of the breakpoints, if you wish the layout to look good on mobile devices like tablets and phones.

Again, I'm not sure why, but what I am seeing online has the changed layer width:
<div id="Layer9_Container" style="width:1200px;position:relative;margin-left:auto;margin-right:auto;text-align:left;">

So what your saying is it is not possible to present a layer that will just show as wide as viewers browser without breakpoints? This works for all browsers on my PC but not for Safari on an iPad. Seems weird that this sample page works perfectly fine on an Ipad: http://www.wysiwygwebbuilder.com/layer_test3.html

[Pablo]

So what your saying is it is not possible to present a layer that will just show as wide as viewers browser without breakpoints?

You can use a layer without breakpoints. However if the content of the layer is wider than the viewport, then the browser will display a scrollbar.

The minimum width of your layer is 1200 pixels. The viewport of older iPad's is 1024: http://viewportsizes.com/?filter=ipad

Note that 100% means 100% of the viewport, so if the content is wider then it will not fill the entire width.

[rogerl]

I ran into this same problem with my banner layers.
If you are not using breakpoints and media queries, which will sort out presentation on small devices, then the only cure I've found is to right click on the layer, click on "Object html", click on the "Custom Style" tab then type in:
min-width: [page width]px
so in your case - min-width: 1200px
Save that and check out on a phone browser.
This has been documented elsewhere in the forum. I only came across it by Google search after looking for a cure for a long time. If you change to break points then you can remove this but do add media queries which will tidy up presentation on small screens especially when changing from portrait to Landscape and visa versa.
Example in Page html - Head tag:

Code: Select all

<style>
@media only screen and (max-width: 768px)
{
#Layer2
{width:768px !important;
}
}
@media only screen and (max-width: 480px)
{
#Layer2
{width:480px !important;
}
}
@media only screen and (max-width: 320px)
{
#Layer2
{width:320px !important;
}
}
</style>

[Epoc]

Thank-you for your input. Thing is I am trying to get this to work on a larger screen, an iPad 4 which has a horizontal resolution of 2048px, not a smaller screen.

What I simply cant understand is this example works fine on the iPad: http://www.wysiwygwebbuilder.com/layer_test3.html

But this simple example I created does not: http://www.ausvts.com.au/test3/index.html

Kinda doing my head in TBH

[rogerl]

Android and IOS are designed to frustrate and then you have to cope with browser differences as well. Can't offer anything further. Did you actually try it out? Perhaps same idea but min-width: 100vw