www.wysiwygwebbuilder.com

Dear Pablo,

when I set a word in italics or if I highlight (yellow), it gets published with a reduced height (or it might be even a different font).

See example here (the paragraph before the embedded video and the yellow highlighted text before that.
http://www.freiblatt.de/Corona_Epicentre1.html

Please note that this is a test version of the page only - it is not officially published as of now.

Thank you very much

Malte

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

For the HTML, see the link that I posted.
Or do you need the original WWB file?

I need a project file, so I can see all your settings.
I do not need to the complete project, only a demo with a single page and the text object.

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

I assume you have enabled 'responsive fonts' for the text object, as documented in the help?

Thank you!

Thank you, I had not enabled "responsive fonts" before. This solves the problem partially:
If I make a new text field with "responsive", then text in italics will have the right height!

But in the text that already exists, this does not work: If I set a word in italics, the format disappears when I save the project (or when I make a preview).

Here is a link to the project file. The problem arises on the subpage called Corona_Epicentre.
https://drive.google.com/file/d/1heB-QU ... sp=sharing

Maybe you could also help to solve another problem : The title on top of the whole page (Frei Blatt) is displayed correctly in computer browsers, but on mobile phones, the font is much too bold. It should be "Lato Hairline", but it is displayed with very broad letters on phones.

Thank you very much for your help!

It looks like you have used styles? This cannot be used in combination with the option 'responsive fonts' because the style overrides the font.
So, the italic format should be part of the style.

Did you configure 'Lato hairline' as websafe font?
http://wysiwygwebbuilder.com/webfonts.html

Dear Pablo,

thank you, great points!

I did not know that style is in conflict with responsive! That explains some of the problems that I had with the display of the page.

I will change the code and am looking forward to the improved page!

Malte

I tried to implement all corrections that you suggested, Pablo and Crispy. Thanks!

The last step for me is now having a better design for small screens / defining breakpoints. Maybe you can help me with this?

I have two issues:

1) I have defined a breakpoint for 768px in the master frame. It works well on a PC: If I make the browser window smaller, the characters "FreiBlatt" get smaller. But it works ONLY if I display the master frame without any content. If there is content in the content place holder, the smaller characters are gone again.
https://www.freiblatt.com/master_frame_en.html

2) The layout of the master frame does not work at all in a mobile browser. All the elements are pushed to the left, and some are even not visible any more.

Here is the wbs-file (please tell me if you need the images as well):
https://drive.google.com/open?id=1_iD9m ... 8rbXidiCBB
I would be very happy if you find additional errors in my code.

Thank you very much in advance

Malte

1. You need to add the 768 bp to your index page (and other pages) as well so it matches the same breakpoints in your master page.

2. Doing #1 above may fix your your issue (havent tested yet).

Also, in Manager Breakpoints, on the index page you have "Activate breakpoints when browser window is larger than the device-width" but in your master page you have the opposite set. These need to be the same throughout the project.

Dear Crispy,

thank you for the fast answer!

Have changed the things that you suggested. Important points (also helped me to better understand the concept).
And in fact, the breakpoints worked (it switches to a smaller font in smaller browsers).
Also, if I simulate mobile devices in the firefox browser, it all looks very good.

But there is still one thing that does not work: In some real mobile browsers (like Opera), the "Freiblatt" text does not look good: It should be in the center (centrally aligned with the news items below - it works very well in a PC browers), but it is aligned to the left (and sometimes the first character is even not visible).

I have tried everything to change this: Put the text in a flexbox container, put it in a layout grid. changed every possible alignment command (wrap / nowrap, column/row, left/center/right/flex-start, etc). I even deleted all elements and left only the "Freiblatt" text and the content place holder. I also deleted all "labels" in the news items, so that they only contained text. But nothing worked.

Any idea what I am doing wrong?

Malte

Can you provide an updated project file with the changes you made?

Oh yes, sorry.
Here is the updated version:

https://drive.google.com/open?id=12z2b5 ... z5caf3IRX3

Is the problem you are seeing evident on the index page, another page or all of the pages? Trying to figure out where exactly to concentrate on.

Thank you for taking your time again for this issue.
If you find additional errors in my page, I would be happy to correct them also.

The problems are mainly on the master frame, including the texts "Freiblatt", "We look behind the headlines. [...]" and the menu (politics, economy).

1) These objects are aligned to the left in the "opera" browser on small screen mobile devices.
2) In any mobile browser, there is some "spare" space at the right side of all objects, but there is no space at the left side (if you swipe, the whole page can move to the left, showing the space that exists on the right side, but you cannot move the page to the right).
3) The flexbox that contains the main menu is defined as "sticky". That works great in PC browser, but does not work in any mobile browser.
4) On the master frame page, I mix flexbox containers, layout grids and the content place holder. Is that mix a problem?

here is demo of your home page with some tweaks.

https://www.wizbangwebdesign.com/demo/news/

I checked on Opera mobile and it looked fine for the most part. The issue to me is a few things.

1. Your breakpoint is 480px. There are a bunch of phones smaller than this (mine included) so this is going to possibly cause the scroll to the right problem you are seeing.
2. Your CSS menu just at the breakpoint is a bit too wide. I know you like the fixed at the top but it is too small for mobile and to me doesnt work. I would use a the responsive menu or panel menu or some other menu for mobile.
3. IMHO, I would add another breakpoint and change the one you have.

Shoot me an email at ron@wizbangwebdesign.com and I can send you an updated project file on how I would do it.