Full Width on iOS

[Macoland]

I have been using WYSIWYG Web Builder for many years and for some reason my websites are not behaving recently. I am currently working on a website using the same settings I have used for years and it looks and acts perfectly in a desktop browser (tested in Chrome and FF). I shrink or expand the window and the layers expand with the browser. When I try to open the site in iOS or Android the layers are not expanding like they should. Any ideas what might be causing this? Thanks!

From the browser:



http://macoland.net/sell/Edge.png


From iOS



http://www.macoland.net/sell/Ipad.jpg

[Macoland]

I have been re-creating the site element by element and it appears that when I have a larger layer (say 850 px in height) it messes everything else up. If I make that later shorter (150px in height) the issue doesn't happen. Any ideas why that would be? I am still testing as well.

Also, I noticed that the pictures I posted above show up in Firefox but not Edge/Chrome. Not sure why which is why I posted the links as well.

[Macoland]

Here is an example of what I mean.

First website looks fine on iOS

http://test.montgomerynativity.com/01/index.php

Second website has alignment issues.

http://test.montgomerynativity.com/01/index.php

The only difference between the two is that the last layer in the first one is 302px high and in the second one is 682 px high. Both look the same in a desktop browser.

[Pablo]

First note that this is not the best way to implement a responsive website.
Layers are fixed/absolute containers. If you want to create a flexible layout then use layout grid or flexbox instead.

The reason why this example does not work is because layer 'BlueHeader' has a fixed width.
So, if the viewport gets smaller then the layout will overflow. You can solve this by adding breakpoints and resizes the layer. for smaller viewports.