Page 1 of 1

Font size with css

Posted: Tue Dec 13, 2022 6:53 pm
by windsurfer
When i use a custom style and set the font size to 12 it still renders at 16 why would that be ?

Re: Font size with css

Posted: Tue Dec 13, 2022 7:00 pm
by BaconFries
When setting the size of fonts it is in points so where you have set to 12points (pt) this is equal to 16px (pixels) so it should render fine in mobile devices. A eg for each point used in a font is 10pt x 1.333(3) = 13px
See the following table.
Image

Re: Font size with css

Posted: Tue Dec 13, 2022 7:04 pm
by windsurfer
Yes i see that but if i specify say 1.2em in the style setting it doesn't apply that font size, it still displays the #wb_Main_Text style
It seems the style doesn't get used unless i put !important

Re: Font size with css

Posted: Tue Dec 13, 2022 7:20 pm
by crispy68
It also depends on where you code ends up being generated in the css file. If you are using global styles then this may be overwriting any code you've added as that is a separate css file.

Re: Font size with css

Posted: Wed Dec 14, 2022 3:07 pm
by windsurfer
How does one not use global styles. I have unchecked the Generate single css style sheet for global styles but still the custom style i create does not apply the font size to my page.
It will always come up as
https://prnt.sc/nxPlf1AY77uP

Re: Font size with css

Posted: Wed Dec 14, 2022 3:17 pm
by Pablo
What code did you add?
Where did you add it?
And why are you using 1.2em?
Won't this effect the rest of your layout?

Re: Font size with css

Posted: Wed Dec 14, 2022 3:37 pm
by windsurfer
I never really said i used 1.2 em
I made a style called maintext and selected the font-size as 12 (Just an arbitrary size) when i publish it adds all kinds of stuff to the style as you can see at wilstv.com but it won't size the font as specified in the style, the only way i can get that result is if i add font-size: 12px !important; in the custom styles section same with the padding, if i don't add the !important it won't apply the padding.

width: 72% !important;
padding: 10px 10px 10px 10px !important;
font-size: 15px;

Re: Font size with css

Posted: Wed Dec 14, 2022 3:46 pm
by Pablo
If you need to add !important then WWB's styles are most like added after you custom style.
Where did you add the code?
And why do you need to add custom code to set the font size?
Why not use the built-in styling option?
Do you have a demo project?

Re: Font size with css

Posted: Wed Dec 14, 2022 4:15 pm
by Pablo
Thanks for sending the project.

You have applied the style to the object’s container, not the text itself (the characters).
So, the inline styles of the text will override the attributes of the global style.
If you use the ‘responsive text’ object then the style will also be applied to the text automatically.

Also, I do not understand why you set the ‘font size’ as custom style instead of the font size property of the style?

Re: Font size with css

Posted: Wed Dec 14, 2022 4:46 pm
by BaconFries
When you select a font in the dropdown it is in points (pt) as it is in other software such as Microsoft Word but the output will always be in pixels (px) this is how it works so compatible for all browsers.
If you look at the chart I provided it shows this.

See previous replies from Pablo that explains this
Pablo wrote: Tue Nov 08, 2022 1:57 pm Note that the user interface displays font sizes in points, not pixels.
14 points = 19 pixels
Pablo wrote: Fri Apr 23, 2021 1:01 pm In most software (like MS word or other word processors) the fonts size is in points, that is why the UI uses points.
The font output size must be in pixels otherwise the size would not be the same on all computers.
Why did you delete your post before explaining your have resolved