Header and Footer are not full width on phones

[ptlycldy]

I was redesigning an old web page to work with smaller devices, and hit a snag. At this stage, it is not intentionally a responsive design.
The demo page of the problem removes all the additional content, but the settings are the same.
The page consists of a Master Frame that has a header, content container and a footer. The index page has three layers, the middle layer has an image. Both pages are 1300ox wide. Works ok on desktop and laptop: the header and footers are full page wide, and the index page (contents) are about 1300px wide centered. All are centered or center in page, during design.

However on both Android phones and an android tablet, the header and footer are left justified and stop about 2/3's of the way across the page, while the index page that is in the content container goes clear across the page. This behavior is the same in three different browsers.

I am using V18

Y'all can view the demo at ancodptest.byethost7.com/Demo

and the .wbs file is at ancodptest.byethost7.com/Demo/JunkTest.wbs

the image used with the page is at

ancodptest.byethost7.com/Demo/opr0122T.jpg


Thanks for your help.

[crispy68]

You have some issues:

1. You don't have any breakpoints. If you want it to look correct on smaller screens you will need to add breakpoints and position the objects in each breakpoint. As it is, everything is 1300px wide.
2. Your index page and master frame page have 2 different page widths (1300px and 970px). You need to make sure all pages have the same widths and breakpoints.
3. On your index page, you have it set to type = Master Page but on your master page you are using a content place holder. If you are going to use just as master page, then you don't need the content placeholder. Otherwise, you need to change type = Master Frame.

If you are going to convert to responsive design, I would also urge you to learn how to use layout grids, flex containers and flexgrids. They will ultimately make things look better on all devices and it does speed up the design process a bit. Using fixed layers and placing things on the page in a fixed position is very old school and not nearly as flexible.

[ptlycldy]

Thanks for looking at this and for your comments, Crispy68. I made an error when I uploaded the *.wbs file and grabbed it from an older directory when ftp'ing it. The older version had two different sized page widths that you caught.
Please look at it again.

The old web site I was modernizing, had early elements of responsive design (I think from V13), and when I put a new header and footer on it as starters, I got these type of results with the header/footer left justified and not going the whole page. So for analysisI broke it down to these two key elements, an index page and a master-frame. and got the same screwy results. There is probably some setting that I am overlooking, but I can't find it. Once this weirdness is solved, I'll go back to using responsive design. But, again, Crispy68, I appreciate your comments on that.


Now, after posting the (wrong) version you saw, and correcting it, I tried an experiment, that probably gives a key to what is wrong.
The current demo version that is up has the master_frame set up in the index page and you get the odd small screen behavior on phones. But I then put a button on the index page that links to the master_frame page, AND then removed the master_frame link from the miscellaneous tab on the index page. When you then run the web site on a small screen, the index page appears fine, and when you click on the button to bring up the master_frame as a separate page, the headers and footers run the entire width of the page as you expect. Thus, I conclude there is something setting associated with being a master_frame that screws up normal behavior. I just don't know where to look.

I've added a second demo page with the button, where the difference is what I described above so you can see the effect:

http://ancodptest.byethost7.com/DemoButton/

the corrected older version:

http://ancodptest.byethost7.com/Demo/ This version is the one the *.wbs file is designed with.

I really appreciate you looking at this, Crispy68, if you come back, or anyone else. I've been going nuts over it.

Thanks, all -- ptlycldy

[wwonderfull]

What I have speculated is that you are using absolute layers which is not totally mobile responsive although it has diverse design capability. Modern or if I say the standard web development framework now uses flex or LayoutGrids. 99.99% of the times in responsive web development flexible grids are used so it is adaptive to all screens. For headers it can be fixed, sticky even floating depending on the need. All it takes for a layout grid do become a header is changing the "position" option. There are countless templates pablo has in his website which shows how it is done. There is also dedicated header and footer tool but if I assume very less modern sites built with wwb use it.

As crispy recommended I would also recommend using flex containers or layout grids which would be best option for both header and footer. All you need is to go to options change the position whether you want to use it as header or footer and your done.

And the page header you used is responsive until the absolute later which as I see the blue ones cause it the become non responsive as they are absolute layers with fixed width meaning not responsive but Page headers or footers are absolute too but with AUTO width which makes them responsive.

You can even download templates and edit them or maybe see how the layouts work. You can browse the official templates of wwb HERE

[ptlycldy]

Thanks crispy68 and wwonderfull-- I really appreciated your comments and I do plan to modernize the web page with appropriate containers for responsive web pages. However, I stumbled over this odd ball response of footers and headers and was puzzled as to what I probably had missed in setup. These were so basic, going back to early page design, I got hung up on it. I plan to let it go and get back to work on the actual web site.

But if anyone is bored and wants a good puzzle--have a go at it. I will leave the Demo and DemoButton *.wbs up for a while longer. But those are on a temporary host site, and will be taken down in a few weeks.

Again, thanks to all who looked at this problem, especially those who commented.

ptlycly

[crispy68]

So the basic issue is this:

1. For the layers on the index page, they are 1300px wide. Since you are using a fixed layout and you have no breakpoints, the layers remain 1300px wide at all times. As you make the browser smaller, you will notice that once the browser is below 1300px, horizontal scrollbars appear. This is due to the fact that the layers are still 1300px wide and are now off the screen to the right causing the scrollbars to appear.

2. As for the header and footer, they are using percentages as the width not pixels. So in this case, the width is 100% of the browser window. So if your browser window is 600px, then the header and footer will only be 600px (100%) which is why you see it being cut off when you scroll to the right. The real problem is the fixed width layers at 1300px. It's sorta like hauling an 8ft x 10ft piece of plywood in a 6ft truck bed. It's going to hang off the end!

3. The other thing to keep in mind is since you have not created any breakpoints, you essentially have a page that is 1300px wide (based on your default page width). Think of it this way, when you decrease the browser window below 1300, you are trying to cram a 1300px wide page into a smaller space. This is going to cause horizontal scrollbars. Only way to alleviate this issue is either to add breakpoints or create your site to be fluid (responsive) from the get go.

[ptlycldy]

Thanks a million, Crispy68. Terrific explaination.

The problem came up as I was trying to cut and paste from an old web site that I am reworking. The first quick tests, gave me this odd response, and I couldn't figure out what was happening. Your explaination really brought forward the problem.

For what it's worth, the new version has breakpoints and things are working as expected. At least so far. I am still learning.