Newbie with Layer setup issue

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Epoc
 
 
Posts: 12
Joined: Mon Feb 12, 2018 2:11 am

Newbie with Layer setup issue

Post by Epoc » Mon Feb 12, 2018 2:27 am

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:

Image

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:

Image

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

Thank-you for any input.
Epoc

User avatar
protectourlands
 
 
Posts: 659
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Newbie with Layer setup issue

Post by protectourlands » Mon Feb 12, 2018 4:15 am

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.

User avatar
Pablo
 
Posts: 14553
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Newbie with Layer setup issue

Post by Pablo » Mon Feb 12, 2018 6:52 am

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

Epoc
 
 
Posts: 12
Joined: Mon Feb 12, 2018 2:11 am

Re: Newbie with Layer setup issue

Post by Epoc » Mon Feb 12, 2018 8:59 am

protectourlands wrote:
Mon Feb 12, 2018 4:15 am
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
 
 
Posts: 12
Joined: Mon Feb 12, 2018 2:11 am

Re: Newbie with Layer setup issue

Post by Epoc » Mon Feb 12, 2018 9:00 am

Pablo wrote:
Mon Feb 12, 2018 6:52 am
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.

User avatar
Pablo
 
Posts: 14553
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Newbie with Layer setup issue

Post by Pablo » Mon Feb 12, 2018 9:56 am

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

Epoc
 
 
Posts: 12
Joined: Mon Feb 12, 2018 2:11 am

Re: Newbie with Layer setup issue

Post by Epoc » Mon Feb 12, 2018 12:01 pm

Pablo wrote:
Mon Feb 12, 2018 9:56 am
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

User avatar
Pablo
 
Posts: 14553
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Newbie with Layer setup issue

Post by Pablo » Mon Feb 12, 2018 1:27 pm

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

User avatar
protectourlands
 
 
Posts: 659
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Newbie with Layer setup issue

Post by protectourlands » Mon Feb 12, 2018 3:54 pm

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
 
 
Posts: 12
Joined: Mon Feb 12, 2018 2:11 am

Re: Newbie with Layer setup issue

Post by Epoc » Tue Feb 13, 2018 8:57 am

Pablo wrote:
Mon Feb 12, 2018 1:27 pm
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
 
 
Posts: 12
Joined: Mon Feb 12, 2018 2:11 am

Re: Newbie with Layer setup issue

Post by Epoc » Tue Feb 13, 2018 9:02 am

protectourlands wrote:
Mon Feb 12, 2018 3:54 pm
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

User avatar
Pablo
 
Posts: 14553
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Newbie with Layer setup issue

Post by Pablo » Tue Feb 13, 2018 9:26 am

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.

User avatar
rogerl
 
 
Posts: 197
Joined: Tue May 03, 2016 8:24 am

Re: Newbie with Layer setup issue

Post by rogerl » Tue Feb 13, 2018 10:51 am

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
 
 
Posts: 12
Joined: Mon Feb 12, 2018 2:11 am

Re: Newbie with Layer setup issue

Post by Epoc » Wed Feb 14, 2018 12:09 am

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 :cry:

User avatar
rogerl
 
 
Posts: 197
Joined: Tue May 03, 2016 8:24 am

Re: Newbie with Layer setup issue

Post by rogerl » Wed Feb 14, 2018 1:08 am

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

Post Reply

Who is online

Users browsing this forum: Magical and 9 guests