Website X5 Pro 13 Template Structure Width Problem 
Author: Peter W.I imported a website made with Website X5 Pro 11 into Pro 13 and have been working on it to implement Responsive Design. I implemented the following Breakpoints:
1900, 1260, 1000, 700. 600, 480, 0px
Under 2 Template / Customization / Template Structure, I noticed the following problem:
The width of the webpage is adjusted automatically according to the breakpoint. This can be seen by selecting the respective size on the left and then clicking on the header.
All but one are shown correctly, e.g. Breakpoint 1900 shows a width of 1900, etc. until you get to 480 which strangely shows a width of 1000 which causes problems on the website. I enclose a screenshot. The 0 and 600px breakpoints are fine, it is just the 480 level which is wrong.
As I have no influence on this setting, how can I fix this or is this a bug in Pro 13?
You can see the website online here: www.grayfieldoptical.com
Another website I have, that I imported from Pro 12, is working normally at all levels.
www.startreknewvoyages.de
How can I fix this?
Peter, if you select header at 600px - 480px, is the image box around the logo perhaps wider than it needs to be?
You may wish to post the URL of the website or a temporary copy of it so we can take further guesses :-)
BTW If 480 is meant to be for mobile view, might I suggest changing it to 380 which is closer to the actual resolution of most phones?
Author
I did post the url of the website: http://www.grayfieldoptical.com
I have attached screenshots of all sizes. Only 600px - 480px is wider (1000px) than it should be.
I was wondering if I can fix this by simply deleting that size and then adding it again (perhaps as 380 as you suggested).
Peter, I suspect the issue is in template, customisation, header and footer. Here you can select 600-480 and select the picture or text box that is an issue then hide for this and lesser resolutions. Then add a picture or text appropriate for that resolution.
(you can also select 600-480 resolution in template, customisation, template structure and remove and replace the header background with a suitable picture, but I suspect the issue is in header as above)
Author
Changing the picture did not help at all as the width was set to 1000px.
I think I have solved this. What I had to do is go to Template / Customization / Resolutions and Responsive Design, click on the 480px level, Edit..., 380, OK followed by Preview and letting the preview page fully display.
Then, I went back to 380px and edited it back to 480px. I then exported the site and the problem was fixed.
There was another minor problem. All objects on all pages on the 480px level, were set to hide and I had to go to every page and unhide every single object.
That sounds normal for an imported project.
However, if your site is updated and online, load it up with your phone. Unless it is better than mine I think you'll find the optimum width for mobile is about 380.
Enjoy.
Author
I have been experimenting with widths on a couple of full-hd Android mobile phones (I do not have an iphone) and found that the best sizes were 360 for portrait and 580 for landscape when using the chrome browser supplied with the phone. 380 was too wide to be shown in portrait mode. I left the 480 size and added 360 as well.
Please test my website on your phones.
Author
Correction 590 for landscape.
Looks great on my phone Peter, although I suggest you change the contact information to be full width so it looks better on the phone/tablet. If you don't want full width on the desktop, place the form in a cell that is only half width on a desktop display (it will be full width on a phone :-)