Why do the Textillate effects remove the bold formatting?

Why do the Textillate effects remove the bold formatting?
0

#1

Why do the Textillate effects remove the bold formatting, ul and li from h3 tags in my portfolio and how do you fix it? https://codepen.io/Olliewe88/pen/pgmWor


#2

You can force the css to set h1 and h2 to use bold text:

h1, h2{ font-weight: bold }

I tried on your pen, it will work :slight_smile:


#3

Thanks for the quick reply but it still doesn’t seem to be working.


#4

Sorry, my bad, I answered too quickly…

First of all, you should not put ul tags in hx ones. hx are for titles. If you need some bold text on the uls, consider using css classes:

ul.my-bold-content li{ font-weight:bold; }

this will select all li element in an ul with class my-bold-content

And in your HTML:

<ul class="my-bold-content">
  <li>Some bold text</li>
  <li>Some bold text</li>
  <li>Some bold text</li>
</ul>

#5

That being said, you also have an issue in the closing order of your tags. You do

<h3><ul>
  <li>content</li>
  <li>content</li>
</h3></ul>

You open h3 first and close it last…

And you should use <strong>text</strong> tags instead of <b> which is deprecated.


#6

And there is an issue with an extra double quote in the img declaration:

<img class="img-responsive align="top" src="http://static6.businessinsider.com/image/54bc1ccbecad04fb41e364cc/the-most-iconic-parts-from-martin-luther-kings-i-have-a-dream-speech.jpg"">

wrong quote position:
<img class="img-responsive align="top" :arrow_backward: No closing quote on class attribute
speech.jpg""> :arrow_backward: it’s here :slight_smile:

Edit that was a misplaced quote…


#7

And after a quick analyse, it appears that textillate breaks the strings into spans, so you lose all the formatting. You can still format the li, but the <b> tags are lost.


#8

<b> is not deprecated and it has different meaning from <strong>. <strong> is used for adding importance on text (like in “You are about to delete everything. This action cannot be undone.”), while <b> is for making text stand out without making it important (like in “Jupiter is the largest planet in the solar system.”).

Bold vs Strong


#9

Thanks for pointing this out, I always used strong since I read somewhere that <b> was deprecated… Semantically, that makes sense :slight_smile:


#10

Thank you very much guys! I will make these changes during this week. :slight_smile: