Buy Now
Sign in

H4 Formatting issue

rtobias , April 25 2017
R
rtobias
I don't know if this is the right place to report this kind of issue, but I encountered this:


I believe it is due to this:


.semanticui-body h4 {
font-size: 1.0714px;
}

(coming from /libraries/cegcore2/assets/semantic-ui/assets.php?type=css&min=1&assets%5B0%5D=reset&assets%5B1%5D=site&assets%5B2%5D=transition&assets%5B3%5D=icon&assets%5B4%5D=message&assets%5B5%5D=label&assets%5B6%5D=button&assets%5B7%5D=dropdown&assets%5B8%5D=checkbox&assets%5B9%5D=popup&assets%5B10%5D=dimmer&assets%5B11%5D=table&assets%5B12%5D=form)

1.1 pixels is pretty small...
Randy
O
omidhz
Yes, I also noticed the same problem. When I give h4 format to a text, the font is tiny and unreadable.
GreyHead
Hi,

It looks as though Max has made some edits to the Semantic UI CSS file (which is now a slightly dated 2.2.4 version). In site.css in the original version at line 38 you will find this:
/*******************************
Headers
*******************************/

h1,
h2,
h3,
h4,
h5 {
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
line-height: 1.2857em;
margin: calc(2rem - 0.14285em ) 0em 1rem;
font-weight: bold;
padding: 0em;
}
h1 {
min-height: 1rem;
font-size: 2rem;
}
h2 {
font-size: 1.714rem;
}
h3 {
font-size: 1.28rem;
}
h4 {
font-size: 1.071rem;
}
h5 {
font-size: 1rem;
}
which uses rem units to compute sizes. In the CF version at /libraries/cegcore2/assets/semantic-ui/inline/site.css around line 53 you will find that rem has been replaced with px - with the result you see. The same is true for /libraries/cegcore2/assets/semantic-ui/components/site.inline.min.css

There is a similar file at /libraries/cegcore2/assets/semantic-ui/components/site.css which is v2.2.6 and still has the rem units. I have no idea which file is used where :-(

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
R
rtobias
Thank you for looking into this Bob.

I guess my main question is (being that I'm not too familiar with the Semantic UI), Is it relatively safe for us to put in a css override to make the h4 readable until Max gets a chance to patch the style? I don't know what else may be affected. If I can just add this override, I'd be happy:

Origin

.semanticui-body h4 {
font-size: 1.0714px;
}


Fixed

.semanticui-body h4 {
font-size: 1.0714rem;
}
Randy
GreyHead
Hi rtobias,

I'm not familiar with Semantic UI at all. You could try using that CSS with an additional selector to limit it to the form code.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
R
rtobias
Thanks Bob. I think you and I are in the same boat.

I used that code as is (had to use it both in my front end template and in Protostar if I wanted to have CF's preview work correctly. It seems fine in that I haven't noticed formatting elsewhere looking far off from normal. I did have it add a !important in though as I didn't use an additional selector and it seems the asset style gets the priority normally.
Randy