H4 Formatting issue

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...

Yes, I also noticed the same problem. When I give h4 format to a text, the font is tiny and unreadable.

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

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;
}

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

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.