[SOLVED] Responsive Text & Breakpoints

[AliGW]

Good morning!

I have two questions about responsive text and breakpoints. I've provided a ZIP with a very basic single-page project file and two images. Some of the content has been taken and adapted from the Beach template. There are a lot of breakpoints because I am trying to learn and understand how things work (this is very much a prototype project). I am using a vanilla version of WWB20 (no hot fixes applied as I don't believe anything so far is relevant to this question, but I may be wrong about this).

I have read as much of the documentation as I can, but I tend to find that until I am actually trying to use features, nothing makes much sense, and even when it does, I don't always get it, so forgive the questions. I learn by doing. There must be something that I'm not understanding here.

My questions are:

• If I change the justification of the descriptive text (contentText1) from justified to left aligned, this does not show when I preview the page in my browser (I use Firefox, but it's the same in Edge). Delving deeper into this, I have realised that whatever I do to that text box on the default tab does not appear to propagate through to the various breakpoints as I would have expected it to. What am I not understanding about responsive text here? Do I have to make the changes in all breakpoints? It's exactly the same with the header text (Text2). It seems to work for a couple of times when I add a new responsive text box, but after that, it refuses to preview correctly. It's most odd.

• I have included a screenshot with the FastStone Capture ruler superimposed - why, when I preview the page, do I see the contents at the 1024px breakpoint view and not the 1920px breakpoint? If I drag the default tab page width wider, it still previews at 1024px. Again, I am sure there's something fundamental that I am not understanding here.

Are my assumptions and expectations wrong, or is there a bug here?

Thank you for your patience and forgive my naivety.

This link will work for 7 days: https://we.tl/t-GZqej4scBj

EDIT: I have updated the WeTransfer link - I had included the wrong project file - sorry.

[Pablo]

It looks like you have share the wrong project. There is no text or breakpoints in this project.

First note that adding breakpoints is usually one of the last things you do when your website is (almost) ready. You will give yourself a lot of extras work if you add break if they are not needed.
A flexible websites only needs 1 or 2 breakpoints, not 'many'. Also, a '1920px' generally does not make sense. The default view is for desktops.
I suggest to keep things simple, especially when you are a beginner.

With responsive text each breakpoint can have its own alignment. Once this is set different in a breakpoint, it no longer sync with the default view.
But you can reset response properties via the Property Inspector.
https://www.wysiwygwebbuilder.com/rwd_tools.html

To be able to answer your other question, I need the correct project file.

[AliGW]

I realised a few minutes ago and updated the link - would you please have a look at the new link? Thanks.

[Pablo]

Thanks for providing the correct link.

You have way too much breakpoints. This does not make sense for a flexible layout.
Also, I do not recommend to use orientation in breakpoints.
You only make it more difficult for yourself! Please keep it simple...

The default view should be the widest view (desktop). So, 1280 and 1920 should be removed.
I am not even sure if you need 1024 at this stage.
Why all those breakpoints?

[AliGW]

Once this is set different in a breakpoint, it no longer sync with the default view.

I have not, to my knowledge, changed the orientation in any view other than the default view.

You have way too much breakpoints. This does not make sense for a flexible layout.
Also, I do not recommend to use orientation in breakpoints.
You only make it more difficult for yourself! Please keep it simple...

I explained why in my opening post. This is how I learn. Please understand that not everyone will conform to your way of learning.

All I wanted was an answer to my questions. This is a learning phase that I am going through - we learn from our mistakes.

The default view should be the widest view (desktop). So, 1280 and 1920 should be removed.

OK. So I need to remove breakpoints and set the default width, then add breakpoints later. I think that makes sense.

You only make it more difficult for yourself! Please keep it simple...

It's about understanding the software. I used to build websites in WPX8 - I am not a beginner, but I am learning a new way of working and thinking. Keeping it simple doesn't work for me - it does not satisfy my intellectual curiosity. Don't worry - I am quite clever enough to cope.

[Pablo]

So I need to remove breakpoints and set the default width, then add breakpoints later.

"Add breakpoints only when necessary. For instance, you might use them to adjust font sizes for smaller screens.
In my opinion, it’s more efficient to finalize the desktop layout first. This approach allows you to handle all breakpoint adjustments at once, avoiding the need to switch between them repeatedly during the initial design process.

[AliGW]

Thank you - as I said, we learn from mistakes - having the 'whys' explained is more useful than 'just keep it simple' (for me, personally). I have always wanted to run before I can walk - it's just the way I tick.

I am very much enjoying the sofware and actually learning it quite fast. I can feel my mind being bent to a different way of thinking. I appreciate the fantastic support and the great care that you take over fixing issues in your software. This is impressive.

[alan_sh]

Just one point (and I haven't looked at your site):

If you have one breakpoint (BP) (the default one) and create and format the text, when you create a new breakpoint, it will use the same text and formatting (as best it can). If you then amend the text in the default BP, that will flow through to the other BPs. However if you change the formatting (text size, bold etc) that will not flow through.

It's the same with flex grids. layoutr grids etc. Set everything up before you create the new BPs and the layout is copied. Change something afterward and it isn't.

At least, that's how I've found it works.

Alan

[AliGW]

Thank you. It's not entirely intuitive, but I'm beginning to get the idea. I'll be doing more on this after the weekend - no doubt I shall have more questions!

[AliGW]

I'm still confused.

I removed ALL breakpoints and I believe I reset properties for ALL items on the page. However, if I pull the default page width to 1600px (just as a test), the page still previews with text and header items at 1024px. What have I not done to make this preview correctly?

This is NOT about whether setting a 1600px page width is good practice or not - it's just about my understanding how to get text items to reflect changes that I make.

Link: https://we.tl/t-3Dl8emn1cT

Thank you to anyone who can work out what I am doing wrong.

[Pablo]

You have set a maximum width for your layout grids, so the content will not go wider than the specified width.

[AliGW]

I have not set any maximum widths ...

If this is so, then they are there by default (or were there in something that I copied from one of your templates).

Could you give a hint as to where to look, please?

[AliGW]

Never mind - I have worked it out.

Thank you!

[Pablo]

If you add a new layout grid then it will not have a maximum width by default.
However, if you use blocks or copy from a template then the maximum width may have been set.

[AliGW]

Yep - clear. Learning ...