Text doesn't fall in line

[Brian Lambert]

Hi
Sorry if this is in the wrong forum section. Mods please move as necessary.

My club web site (produced using V17 but this also applied when using V16) which I maintain, uses three Breakpoints plus the Default. The Breakpoints are set to 1024, 768 and 320.

When I enter any text or image in the default page in the position required the three Break points seem to do their own thing and place the new text/image in amongst the original text up the page!

I have to find the text/image and drag it down to where it should be in each Breakpoint

Why is this and what can I do to stop this if possible?
See images

Many thanks
Brian.

Default page with test text line
Default page input text by Brian Lambert, on Flickr

Text moves on 1024 page..
1024 page text displaced by Brian Lambert, on Flickr

Text moved on 768 page..
768 page text displaced by Brian Lambert, on Flickr

Text moved on 320 page..
320 page text displaced by Brian Lambert, on Flickr

[Pablo]

This is most likely because the output format of the text is set to the wrong value.
For example, for responsive text the output format should not be set to "Use <div> ..."

See this FAQ:
viewtopic.php?f=10&t=34318

[Brian Lambert]

Hi
The text is according to this view all <p> tag
I have tried entering temporary new text lines each with a new output option and still the new text places itself in the wrong place in the three Breakpoint pages.

This is the <p. tag screen shot but text was still placing itself half way up all breakpoint pages!

Default p.tag by Brian Lambert, on Flickr

[Pablo]

To be able to help you, I need a DEMO project so I can see all your settings.

Note: I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

Please see this FAQ for further details:
viewtopic.php?f=10&t=82134

[Brian Lambert]

Hi
I have tried a completely new web site page. Set three Break points, then added text and a couple of images etc.
The 1024 and 768 px pages look OK and text follows correctly, but the 320 is a total jumble of inter mixed text lines and images!
All text shows <p>values

Temp Default page by Brian Lambert, on Flickr

320 page by Brian Lambert, on Flickr


Are you suggesting that I take down my clubs web site and replace it with this temporary one? That's a lot to replace once finished! See www.favershammrc.org.uk

[Pablo]

Are you suggesting that I take down my clubs web site and replace it with this temporary one?

No

To be able to help you, I need a DEMO project (wbs) so I can see all your settings.

Please see:
viewtopic.php?f=10&t=82134

[Brian Lambert]

OK I'll see if I can add a new page to the existing site and upload that, then paste a link here I assume that's correct??
Im not really 100% sure as web design isn't my favorite pastime!!

[BaconFries]

OK I'll see if I can add a new page to the existing site and upload that, then paste a link here

No this is not helpful when it is asked to provide a demo it is referring to a demo of your project file the .wbs

[Brian Lambert]

I really do not understand what you want me to do?? Sorry!
I can copy and paste one of the problem pages from my clubs web site (Blog 2021) into a new file called Demo.
But what I don't understand is how I get that Demo page uploaded and be able to have a URL link to it?? This is the line I don't grasp...
Then upload your project (.wbs) to your website or another public server and include the link in your post.

I need further hand holding!

[BaconFries]

Ok let's try to guage your understanding and get you on track of what is being asked. When you save your project it is saved as a .wbs file along with the HTML files and associated files (images, javascripts etc). What is being asked is you provided a copy of the .wbs file or just a cut down in size of it a (demo) this is asked purely so that the settings you have applied in the software can be viewed and a answer be given.
If you just provide a link then it is not possible to see any settings you have set in the program we can only see the HTML source hence why a copy or demo of the .wbs is needed.
You then can share the project file the .wbs by uploading it to your own site and provide a url or upload to a public server (file hosting) such a mediafire and share/provide the url they give.

I see that you had a similar question at the following url did you contact crispy at that time? and is so did he help resolve this for you. If not did y resolve yourself and how so you can apply it here.
https://wysiwygwebbuilder.com/forum/vie ... 52#p449152

[Brian Lambert]

Hi
Thanks and I'm really sorry for not understanding what needed fully..
I understand (I think!) what is needed for the first part. A new .wbs file is created with just the problem page in it.
But what I'm not grasping is the uploading of it to my web site??
Surely, if I upload a new .wbs file to an existing www. site all the existing web detail is removed and the new temporary one replaces it? Is that not correct? I can not for the life of me at this stage see how to do it any other way?? Hence my comment a few back about taking down an existing site and uploading the temporary one for you to look at.
Or am I really missing something?

BTW the previous problem was not resolved until I was advised to use the Layout Grid method by Ron in the USA, who hand held me for several days in correcting errors. My own web site was completely re written using Layout Grids and works fine. But I am trying to avoid all this for the Club site.

[Pablo]

I understand (I think!) what is needed for the first part. A new .wbs file is created with just the problem page in it.

Correct

But what I'm not grasping is the uploading of it to my web site??

You will need to share the wbs file, not publish it.

- upload the (demo) projetc file to a public location. This can be either a folder on your website or file sharing service.
- share the link to the file.

[BaconFries]

I understand (I think!) what is needed for the first part. A new .wbs file is created with just the problem page in it.

Correct

Surely, if I upload a new .wbs file to an existing www. site all the existing web detail is removed and the new temporary one replaces it? Is that not correct?

No this is because you are not replacing any HTML or associated files you are simply uploading the .wbs

To try and make this as easy as possible make a "New" folder on your site name it demo then upload the already mentioned .wbs to it nothing else and then provide a url / link to it
Like below
https://www.favershammrc.org.uk/demo/demofile.wbs

[Brian Lambert]

Right hopefully this is correct...
New web site built from a copy and paste of teh problem page Called it Demo.wbs

New page added to existing web site also called Demo, Demo page uploaded to existing site.
In the temporary Demo.wbs the Demo file uploaded to existing extra Demo page on www.
Here is the link https://www.favershammrc.org.uk/demo/

Still not sure this is whats needed? Doesn't look right to me! Its just a page copied from another page.
Otherwise how do you attach a .wbs file to an upload??

[Brian Lambert]

I've tried an alternative
Hopefully this is whats needed? https://www.mediafire.com/file/m1f2gam4 ... o.wbs/file

[Mikro]

Hi Brian,

<edit> your mediafire way will work too, you got it sussed as I was replying </edit>

no that doesn't seem right either but you are close.
I think you are still getting a little confused between "publishing" and uploading in Wysiwyg.

Whenever you click on the publish button, a dialog will pop up.

This shows a location where you are going to publish to. Instead of clicking publish like you would usually do, click the "Explore" button on the right.
This will connect to your domain and will display a list of folders etc.
Servers have different folder structures so I can't give you an exact folder to choose but you should at least see an "index.html" file showing when you are at the correct one.
Then click the "Upload" button. This is where you then browse to your "demo.wbs" file on your PC and upload it.
The url for Pablo would then be something like www.favershammrc.org.uk/demo.wbs

Hope this helps you a little.

All the best,
Mike.

[Pablo]

Thanks, I have the project now.

However, it does not look like you did anything to optimize the layout for the smaller breakpoints.
You will need the re-arrange the objects so they are inside the viewport.

Please see:
https://wysiwygwebbuilder.com/rwd_basics.html
and also
https://wysiwygwebbuilder.com/layout_modes.html

[bkjohns]

Did you try setting output format to 'Default'?

[Brian Lambert]

Hi
Yes it is set to Default

The Demo file is not as the main web site is set up to!! It was a direct copy and paste of the Blog 2021 page of the normal set up. But it seems the page setting have not been copied over hence the totally wrong views in the Demo file as seen by Pablo.

I'm not sure how to provide a like for like copy including all existing settings?

Its taking me a long time to understand How To post files but it looks like the file is wrong! See my images I placed originally of the three Breakpoints and the Default page. New items are not carried over into their correct places in the Breakpoints and are placed in all sorts of odd places and no two Breakpoints are the same.

Is there anyway I can send the actual file over as is???

May have to leave now until tomorrow now as I'm beginning to get web itus

[Pablo]

Sorry, but you images are not useful, I need to see the project file

I'm not sure how to provide a like for like copy including all existing settings?

1. Save the project under a different name
2. Remove everything from the project that is not relevant to your question
3. Share the project

[Brian Lambert]

I thought that is what I did with the Demo file! Blatantly and obviously not!
I will if you are ok with my struggling attempts, try again tomorrow.
TBH What seems very basic to you and your colleagues, is like a roller coaster ride for me and huge/vast learning curve. So bear with, and hopefully I'll get there, but I have L (Learner) plate fixed on my back.

[alan_sh]

Brian,

What you are doing is called 'adaptive' rather than responsive. In adaptive mode, you have done it right by creating 4 breakpoints. The bit you have missed is that for each of the breakpoints that are not 'default', you have to go in and manually arrange the text and pictures, ensuring that they are all within the breakpoint viewing area.

With responsive mode, you (generally) only have 'default' but put everything inside layer grids or flex grids and that does the adjusting for you for different page widths (it's a little more complex than that, but that is the basic idea).

So, with the first one, it's harder to set up and maintain but things go EXACTLY where you want them. With the second one, you are relying on the browser to interpret what it thinks you are after and position/size things accordingly - but it's much easier to maintain (and looks nicer too).

Does that help?

Alan

[Brian Lambert]

Hello everyone.
Thank you to all of you who offered help and guidance yesterday.

Well today is a new day and I've (hopefully) been able to save the document as a new .wbs file and I've called it pages.wbs.
I've stripped out all the pages except the Master page and one called Blog 2021. This Blog page is representative of all others in the original document.
To aid seeing the problem, I've added a new text block at the bottom of the default page and made the text red so as it shows up better. Looking at the three breakpoints you will see that the new red text is not placed where expected - at the bottom of the last lot of text, but is placed at random anywhere in amongst the previous original text and images. This also applies to any images added via the default page too.

So what is the problem and is it due to me using the default page as the main input page? Or is it something else??

Hopefully the file can be downloaded from here, so as you can open and view it.... https://www.mediafire.com/file/91scqp7n ... s.wbs/file

If you're not able to download or open it let me know and I'll try an alternative method.

Many thanks for your continued support.
Brian

[Pablo]

First note that the output format of the text is set to 'use <p''. This option should only be used in combination with 'enable responsive fonts' See also the help.

To place text where you want it, you can move it to the right position.
Because you are using fixed/absolute layout, this is not done automatically.

[Brian Lambert]

Hi
Thanks for looking.

Enable responsive fonts is ticked?
If not <p> then what would you recommend to be used?
I've been moving the text boxes or images for many months, so no problem.
I raised the question only to see if I was not doing something incorrectly and by changing something it would/may then have placed the text correctly in line.

[Pablo]

Please see the help or this FAQ:
https://forum.wysiwygwebbuilder.com/ ... 10&t=34318

If you use flexible layout (using layout gr5doi) then the text will automatically be moved on smaller breakpoints
Hoover, if you use fixed/absolute layout then there is no way for the software to know where you want the text to go on a smaller screen.