320px and 768px text and images all intermixed!

[Brian Lambert]

Hi
Having upgraded to V16, I had hoped the mobile phone setting (320px) and Tablet setting (768) would work better. But it seems this is not the case!
My home page www.brian-lambert.co.uk for example works 100% on a PC and laptop, but view the same page created using the additional options of 320px and 768px are a total mess! Unreadable text etc with text overlapping and not readable at all.

I have some images below to show the issues taken today from a mobile (cell) phone, same page on a PC and finally the two set ups in V16
So I'm despairing what is so wrong, the page won't show correct on a mobile to Tablet???

Examples...
Mobile screenshot...
Mobile Phone Screenshot by Brian Lambert, on Flickr

same page on a PC (Correctly displayed)....
PC view by Brian Lambert, on Flickr

WYSIWYG pages....
320px....
320px set up by Brian Lambert, on Flickr

768px....
768px set up by Brian Lambert, on Flickr

What can be done to correct their view on smaller devices???
I am loosing time and patience with these settings which for some reason are not working!

Help

[crispy68]

One thing that would help is to provide a project file so we can see all your settings.

A couple of things:

1. Objects in your 320px view should all be moved within the 320px width even if hidden. Many of the objects are way outside of the boundaries which may cause horizontal scrollbars.

2. The text inside the box...why are you using <div> for each line of text? A normal text box is responsive on its own and you can use responsive text if you need a different size in a breakpoint.

3. Browsers can render text slightly different from browser to browser. Make sure you give text boxes enough space above and below and even on the sides to adjust a bit if necessary. The red text "NOTE: Due to the large...…" looks to me if you slightly widened the text box the word 'phone' would pop back up to the previous line and then not overlap.

You may want to consider using a flexible design with layout grids, flex containers, flexgrid which helps eliminate the text issues.

[Brian Lambert]

One thing that would help is to provide a project file so we can see all your settings.

A couple of things:

1. Objects in your 320px view should all be moved within the 320px width even if hidden. Many of the objects are way outside of the boundaries which may cause horizontal scrollbars. Gosh Never considered that I thought if hidden they no longer mattered!

2. The text inside the box...why are you using <div> for each line of text? A normal text box is responsive on its own and you can use responsive text if you need a different size in a breakpoint. <div> being used??? I dont set the HTML its automatic AFAIK??

3. Browsers can render text slightly different from browser to browser. Make sure you give text boxes enough space above and below and even on the sides to adjust a bit if necessary. The red text "NOTE: Due to the large...…" looks to me if you slightly widened the text box the word 'phone' would pop back up to the previous line and then not overlap. Enough space?? Press Enter a to set a line unused line then type and do the same at the end or add a full stop top and bottom? Confused by that!

You may want to consider using a flexible design with layout grids, flex containers, flexgrid which helps eliminate the text issues. Hmm... the web site is massive and already published. To convert it can each page be done with a highlight and click somewhere?? Sorry I'm not overly IT literate, but learning!

I thought WYSIWYG Webbuilder would be simple to use and provide a super web site, but its getting more and more complex with each problem encountered. WIX next?
Hope you don't mind but I've placed my answers in red next to your text to make it more understandable!

[crispy68]

Wix? If you want cookie cutter designs and limited control then sure.

Can you provide a project file of that page? I'd be happy to look at it and send you back a corrected version. The problem is there are so many options/settings in WB that it is hard to discern the problem let alone give you a fix without seeing what you've done. Feel free to email me directly if you want at ron@wizbangwebdesign.com

If you have a lot of pages, then yes it will take some time to convert to a more fluid/flexible design but in the end it is well worth it.

[Brian Lambert]

WIX was a tongue in cheek comment!

Now, as I said I'm not overly IT literate, so what exactly is a "Project file"? Sorry! Is it the HTML version?

[crispy68]

By project file I mean the file you open with WB. The file extension is .wbs.

[Brian Lambert]

OK understand and will forward the file
Thanks

[Pablo]

Note that if you set the CSS visibility property (in Tools -> Options -> HTML) to 'display:none', then most objects will no longer affect the layout in other breakpoints.

Also note that WWB has many tools that help you make responsive layout easier.
https://wysiwygwebbuilder.com/rwd_tools.html

And this information may also be helpful:
https://wysiwygwebbuilder.com/layout_modes.html