320px view jumbled

[strmzap]

I've used this site builder since Jan of 2019 and love it. 2 weeks ago, the 320px vers of my site went jumbled. I've been trouble shooting for 2 wks and can't figure it out. I have to add and remove content several times per week for my business and never had probs til now but i haven't done anything different. default view is fine but 320 is wacko. especially using firefox. I just bought your new 16v hoping it would help. it didn't. some pgs are now looking ok but not others. "shed types" pg is very bad. please help. files at- www.dennistuff.com

[MGD4me]

I downloaded your project file to have a quick look...

First impression: Wow... you have a lot of pages to wade through. Using terms like 'wacko', 'jumbled'. and some pages 'ok' makes it a bit challenging for someone to understand the exact issue.

Second, there were no images in the 'image' folder, so I used a couple of my own to fill in the placeholders. Perhaps not having all of the images made it more difficult to grasp your issue, but here goes...

The only problem I had, was that there are 2 or 3 very long blocks of text in the 320 breakpoint. In the program workspace, the blocks seemed to close to each other (to me). There are titles, like 'Buy', 'Rent', etc, which are separate text blocks. Personally, I would include the titles inside the blocks of text, to which they belong. You can change the font size and colour inside the block, to be different than the body of the block text, just as you wish, but it helps to create the alignment you were seeking..

When I Previewed a couple of pages in the 320 BP, the overlapping of text blocks is the only issue I noted. But as stated, having so many pages to go through, with no accompanying images made it difficult to know exactly what to look for.

If the overlapping text is NOT the issue, perhaps you could isolate 1 page where you are having problems, and describe what you see.

And, as you noted, different browsers can produce somewhat different results.

[strmzap]

Sorry I didn't put any images up,, they're there now. Yes, I understand there can be some streamlining done re text but the fact that the text has been like that and worked perfectly for a year and a half, up until 2 weeks ago, that is.. tells me something just changed. I got WWB cuz it's "what u see is what u get", and it's been gr8. What happened? All of a sudden.. what I build and see is NOT what I get,, but only in 320px view. Firefox "web developer-responsive design mode" shows all is good. But when I check it using my samsung phone via firefox,, things are horribly overlapped. Using chrome,, it's better but still some overlapping (again,,320px only). Anybody have any idea what's wrong?? I need to be able to correct this right away.. it's my business and this is busy season

[Pablo]

Can you please simplify the project and remove all content that is not relevant to your question?
With this many pages I have no idea where to start looking. Or what to do to see the problem.

See also this related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

[strmzap]

Ok,,, I took it down to 3 pages.. "index", "shed types" and "on our lot today". I sure hope you can help me. Thanks for taking time to investigate

[strmzap]

I see no problem with the "default".. it's the 320px. It's views REALLY bad using firefox on a samsung phone. index pg not so much but "shed types" is pretty much un-readable. Thanks again. I sure appreciate the help

[crispy68]

Hey Strmzap,

First of all, can you share what type of phone you are using to view it on?

I downloaded what you have and there are several things that I see that really need addressed.

1. Your default is 1250px and then you have 1 breakpoint of 320px. That is a HUGE distance in breakpoints. Basically, you are making any device that has a device width of 1249px or less see your 320px breakpoint. It is going to look tiny on some screens. You need to add more breakpoints.

2. Your text is size 6 and 7 in 320px bp. That's way too small even for mobiles and Google will zap you for having too small of font. Also, why are you using different text boxes for default and the breakpoints? If you want to have different sizes, simply set the text box to use responsive fonts. There is no need to duplicate the same text in breakpoints. Keep in mind, that fonts will render slightly different from browser to browser so when you are placing text blocks on top of text blocks you need to allow more room for the text to breathe. Cramming everything together will result in text overlapping.

3. Many of your images contain spaces. Do not use spaced in image files names. If you want to add some spacing use a dash or underscore for the space. Ex: you have an image file named "header 640x 189-master frame.jpg". Change it to something like "header-640x-189-master-frame.jpg". No spaces. This can affect how the images look when viewed in a browser.

4. There are some objects outside of the viewport. For example, in default Text25 is outside of the viewport. All objects need to be within the viewport width to avoid horizontal scroll bars. You have 8 other objects on the page outside the viewport. Click the error reports button to see all of the errors on the page and correct them all.

The main issue that I see for the most part is text overlapping each other in spots and this is due to the multiple font sizes you are using within the same text block and then text blocks so close to each other.

-------
Since you are using a fixed layout (versus creating a floating layout using layout grids which I would recommend instead), here is what I would suggest 1 page at a time:

1. Add more breakpoints: 1004px, 768px, 480px in addition to what you have.

2. Use the same text block in each breakpoint. Do not duplicate the same text objects. Enable responsive fonts to have different fonts sizes if needed. For the 320px breakpoint, dont make your text less than 12pt. I would also keep most of the text the same size unless it is a heading. You can make the heading bigger if need be or simply bold it or give it a different color. Some of your text boxes have a font that is 6 and 9 in the same text box. I dont advise doing this as the rendering can be odd which is what i'm seeing.

3. Give your page some space. Each shed sections doesnt need to be crammed on top of the next one. This will allow for your text to have some space in case the font is rendered different in another browser.

4. Fix all of your image names.

[strmzap]

Thanks, I appreciate your advice. It still seems strange that the whole site has been running "as is" with no problem at all (and I check it 5-6 times per week) until 2 weeks ago. Any idea why the sudden explosion?

[Pablo]

If you did not change anything yourself then maybe your web host has changed something?
Or maybe the browser of your phone was updated?
Or maybe the cache of your phone became corrupted?

[strmzap]

Host hasn't changed anything, phone updated about a month prior to this issue, suspected a cache problem and tried that first,, and continuously ever since. It looks the same on every samsung phone. Haven't checked any i phones. I'm wondering if my WWB has corrupted. My website is crucial to my business. Inventory comes in and goes out at least every other day and the site has to be updated. I have loved using WWB but am going to have to find another wysiwyg system. Thanks to all who have tried to help with this issue

[Pablo]

Did you fix all the issues described by crispy68?

[strmzap]

In the process of doing that. Where is the error reports button he speaks of??

[BaconFries]

It can be found under Menu -> Page -> Error reports

[strmzap]

Thank you!! I'll let you know if this works. Again.. very strange that my site has ran wonderfully just the way it is up until now. Like all of a sudden all these errors would mess up the site even though the errors were there for 1.5 yrs with no problem.

[strmzap]

I'm troubleshooting this issue and having no success. I built a simple, 1 pg site using the WWB v16 i just paid to download. The error report shows "0" errors and still the 320px view is messed up. Certainly NOT "what i see is what i get" like it used to be. See the project sample at www.dennistuff.com and tell me what you think please.

[Pablo]

Please share a demo project (wbs), so I can see what you have done.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

[strmzap]

i did a simple demo. images don't seem to be affected. just text overlapping or just going wherever,, no matter where i place it. very simple 1 pg demo project here http://www.dennistuff.com/strmtest.wbs

[strmzap]

and only on the 320px view

[Pablo]

- right click the text object
- select 'object properties'
- set 'output format' to 'include line-height in text styles'

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=34318

[strmzap]

I'll give that a try and let you know. Thank You!!

[strmzap]

That didn't fix it. Thank you, though. I'm still trouble shooting and experimenting. What would be factors to consider being as it was perfect a month ago, and without making any changes (other than the normal adding/subtracting pics and text to inventory page) the 320p view was chaos just overnight. Could i have been hacked, or maybe a virus corrupted WWb on my pc??

[Pablo]

I have tried this with your project and it works for me.

I do not think this was caused by a hack or virus. It is related to the way browsers render text. Basically the line height is browser is 'undefined' so that is what is causing the spacing.

See also:
https://www.wysiwygwebbuilder.com/forum ... 10&t=34318

[strmzap]

I'm not intending to be a pain here but, again, the site was trouble free for over a year and a half. Then went bad overnight. Did the browsers take that long to register the line height issue?

I am still trying to find a way to have my site be what it needs to be using WWB.
I'm building content of each page as jpg. Then I just add 1 image to each pg with text included on the jpg so no more spacing problems.
I do need to add links to images though. I added transparent boxes (from add shape) over images then added links to the boxes. So far,,, so good

[Pablo]

Maybe the DPI configuration of your computer has changed?
This may cause text related issues.

See also this related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=85917

[strmzap]

update- I ended up having to get a new computer. Now I need to install WWB on the new PC. I had just bought the v16. Order #***removed***. I'll need to download WWB again using the new PC, correct??

[strmzap]

do i need to pay again or how do i do this correctly?

[BaconFries]

do i need to pay again or how do i do this correctly?

No there is no need to purchase again. You can use the licence you have already on the new PC.
Please note the following:
Order number deleted please do not post this is a open forum for security reasons!!!