text line height breakpoints

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

text line height breakpoints

Post by syncopic »

Hello Forum, Hello Pablo,

i have a problem with text (with colored background) in different breakpoints.
In breakpoint 1200px (textsize 14) everything is fine.
In breakpoint 980px (textsize 13) and breakpoint 768 (textsize 12) the line height is to much and the background doesn´t cover the text.
Whenever i change the textsize, the line height will not be changed, depending on the textsize. Using a 'style' for text (with fixed size and line height) makes the text 'not responsive'.

examples:
Image
Image
Image

The text is responsive and as 'Use <p> tags' formatted. Other settings are also wrong in publishing. The font ist set to 'manually @fontface' and the font (Opensans) is published with website. The failure appears in different browsers.

Is it my fault based on wrong settings ? I don´t want to create a single text for each breakpoint with correct settings :(
User avatar
Pablo
 
Posts: 21591
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: text line height breakpoints

Post by Pablo »

Do you have a demo project?

Note that I do not need your complete project, I only need a simple page with the text object and styles so I can immediately see what you have done.
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: text line height breakpoints

Post by syncopic »

Hello Pablo,

i´ve made a Project-Backup (ZIP) with reduced sites (only masterframe and one exemple-site):
https://www.pro-e-fact.de/downloads/SBHD_2020_D.zip

8)
User avatar
Pablo
 
Posts: 21591
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: text line height breakpoints

Post by Pablo »

When using absolute positions, it is usually difficult to get pixel perfect result because different browsers render fonts differently.
Also, the exact size of the font is different per font.

In your case I have found that using line height: '1.25' and font fine tuning '1.1' seems to give decent results.
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: text line height breakpoints

Post by syncopic »

Hello Pablo,

thanks for your answer - i will try with your suggestions.

What i don´t understand ... in the year 2020 ... if i set a fixed font incl. publishing the font, set a fixed size and a fixed line height ... that the rendering in browser isn´t exactly :x - so i have to check every page in every breakpoint in almost 10 browsers ... drives me angry.
For sure that´s not a problem of WWB, but ... it´s unbelievable for todays (non)standards.

Greetings from Germany :wink:
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: text line height breakpoints

Post by syncopic »

uuhhmm ... another question ...

The 'Fine Tuning' i can also set in 'style' ... but then ... if i let the textsize empty and the padding also ... can i set different values for each breakpoint ?
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: text line height breakpoints

Post by syncopic »

Ah ... sorry ... my fault ... it´s available in the properties.

Thanks again 8)
syncopic
 
 
Posts: 61
Joined: Mon Jul 24, 2017 1:37 pm

Re: text line height breakpoints

Post by syncopic »

Ok .. after trying and trying and trying ...
Best settings are:

Breakpoint 1200px = textsize 14, lineheight 1.0
Breakpoint 980px = textsize 13, lineheight 0.9
Breakpoint 768px = textsize 12, lineheight 0.9
Breakpoint 360px = textsize 14, lineheight 1.0

Used font: Opensans - checked with Firefox, Chrome, Opera, Edge, Safari

Maybe this helps other people to get almost correct results :wink:

Greetings !
Post Reply