YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar mike.biolsi asked

BUG & SOLUTION - CSS for Drop Cap

The CSS for drop caps in text elements uses the em unit to assign the font size, which causes incorrect rendering in some browsers. This can be fixed using the rem unit instead.

  • UIkit
  • YOOtheme Pro

12 Answers

0

Avatar philipp Yootheme answered

Hi,
what do you mean by incorrect Rendering?

Kind Regards
Philipp

0

Avatar philipp Yootheme answered

This is really strange I took a look at this within Edge and for me DropCap looks as expected working with em.

The problem which is the reason why we can not use rem by default is, that when we use rem all the DropCaps are sized equally, since it is depending on the fontsize of the root element. When a user has two text elements with a different fontsize, the DropCap might take correctly 3 lines in the one but then in the other it would look different. For this em should be much better since it takes the font size of the parent element, which makes it much more flexible for different fontsized text elements.

Kind Regards
Philipp

0

Avatar mike.biolsi answered

That is strange indeed, as I can observe this problem on several different computers and laptops running Windows 10. I do agree that em should work better, but for some reason it doesn't look right in Edge or IE anywhere I test it.

It is also consistent across every site we have built using YTP. One example can be seen here: https://miscdelights.co/about

In Chrome: https://www.screencast.com/t/WC4htJGDO
In Edge: https://www.screencast.com/t/c8xQB1cwerH

Changing the value to 2.3em in Edge causes it to display correctly, but that makes it too small for Chrome.

0

Avatar philipp Yootheme answered

Okay I will check this when I am home, there I have multiple Win10 computers running, here we work with MacOs and I can only test it in a virtual machine. I don't think that this should make a difference but we will see :)

Kind Regards
Philipp

0

Avatar mike.biolsi answered

Philipp, did you ever get a chance to test this from Win10?

0

Avatar keaton.halley answered

Did you guys ever figure this out? I see the same issue with the site I've been working on using YOOtheme Pro 1.10.x. What's the best way to modify the CSS to use the rem unit instead, at least until the problem is fixed?

0

Avatar mike.biolsi answered

@keaton one way to get around it is to use non-relative units in the CSS. For example,

.uk-dropcap::first-letter, .uk-dropcap>p:first-of-type::first-letter {  
    font-size: 80px;  
}

You can add this globally, or directly to a text element's custom CSS if you want to avoid global adjustments.

Edited

0

Avatar keaton.halley answered

Thank you. Where exactly should I put that to be the least disruptive to the theme? Should I just stick it in the editor where the text is?

0

Avatar mike.biolsi answered

Every text element (like most elements) has a space for CSS under the "Advanced" tab: Image

0

Avatar jacob.whitaker answered

Thank you @mike.biolsi. I pasted the code you gave into that field but no change. Should I be customizing the code you suggested in some way?

0

Avatar mike.biolsi answered

Yes, actually, sorry. That CSS is being included below the .uk-dropcap class, so you have to target the text directly. For example,

p:first-of-type::first-letter {    
    font-size: 80px;    
}

In that case you would just need to make sure the text includes the paragraph tags, as the default code editor does not add them automatically. I tested this with the above code and it worked.

Know someone who can answer? Share a link to this question via email or twitter.