www.wysiwygwebbuilder.com

On my website, I want various squares/texblocks with text in it, on several spots.
The text is to be displayed in various sizes (mainly 2), and is to be accompanied by an icon or a button (with a link).
An example can be found here: http://wilfredvanduyn.nl/Layout-issues.html.

The issues I now experience are:

• If I want the text on my website in e.g. 14pt; in the canvas it is displayed very tiny in approx. 3 pt.

• Since the text in the canvas does not represent the way how the text is displayed on the website, the sizing of the square is more like a gamble. Depending on the breakpoint and browser used, is to be resized. This does not sound very responsive to me... There must be better ways to do this.

• Another gamble is positioning the button in the square. This also depends on the breakpoint and browser used, whilst I would prefer defining a relative position towards the square.

I have tried to design it with a flex grid, but I cannot get that working either. The flex grid is far too wide and remains on top of the page, whilst it is to appear on several spots on the website. And it is a hidden secret to me to get that flex grid filled with text.
What is the best way to solve my issues?

BTW: it would help to have a kind of instruction video to handle this kind of design solutions. I suppose I am not the only one dealing with this kind of design.

Firstly, you may want to check out cards, which do exactly what you are trying to do.

If the text is displayed different than in the browser then this is most likely related to the DPI configuration:
https://www.wysiwygwebbuilder.com/forum ... hp?t=85917

If you need further assistance then please share a DEMO project so I can see what you have done.
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

Also, note that there are many examples available.
https://wysiwygwebbuilder.com/templates2023.html
https://wysiwygwebbuilder.com/templates2022.html
https://wysiwygwebbuilder.com/templates2020.html
etc

Tutorials can be found here:
https://www.wysiwygwebbuilder.com/getting_started.html

Links to video tutorials
http://www.wysiwygwebbuilder.com/video_tutorials.html

Hi, thank you for your 'tip' regarding High DPI screens.
That was helpful, however after having set that particular switch, I had to review all styles again.

Here is the link to the wbs-file: http://wilfredvanduyn.nl/20221110 - Layout-issues.wbs

Your project works correct for me.
What do I need to do to see the problem?

Also, did you try to use cards? They are responsive (and flexible) by design.

Hi Pablo,

The thing that does not work well in my latest solution, is the button.
Depending on the breakpoint, the button mingles with the text.

But you are correct that the cards-object works much better in that respect.
I just tried that one, and I get the feeling it is more suitable for use on differtent devices with different browsers.
The only issue wit card is, that the centration (left/center/right) is defined for all objects within the card.
E.g., I cannot have the header and button centered, whilst the text is aligned left.
Furthermore, I cannot add icons to a card. At least: the card-object does not give me that option.
Is there another object where this can be done?

The problem with the button in your example is that you are using 'absolute layout'.
In that case ,the browser may render the text with a slightly different size, so you will have to take that into account.
This is documented here: https://www.wysiwygwebbuilder.com/forum ... hp?t=34318

About cards:
- You can use a different alignments for text inside a cards.
- You can also use icons in cards.

Again, there are many examples for this here:
https://wysiwygwebbuilder.com/templates2023.html
https://wysiwygwebbuilder.com/templates2022.html
https://wysiwygwebbuilder.com/templates2021.html
etc

wvanduyn wrote: Thu Nov 10, 2022 1:48 pm Hi Pablo,

The thing that does not work well in my latest solution, is the button.
Depending on the breakpoint, the button mingles with the text.

But you are correct that the cards-object works much better in that respect.
I just tried that one, and I get the feeling it is more suitable for use on differtent devices with different browsers.
The only issue wit card is, that the centration (left/center/right) is defined for all objects within the card.
E.g., I cannot have the header and button centered, whilst the text is aligned left.
Furthermore, I cannot add icons to a card. At least: the card-object does not give me that option.
Is there another object where this can be done?

Have you looked at Sections in WWB 18? That may do what you want. [Download a trial version before you pay if needed]

Alan