H4 Formatting issue

rt

rtobias 25 Apr, 2017

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

om

omidhz 29 Apr, 2017

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

Gr

GreyHead 30 Apr, 2017

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

rt

rtobias 02 May, 2017

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

Gr

GreyHead 03 May, 2017

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

rt

rtobias 03 May, 2017

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.

Forums

H4 Formatting issue