Font size is not changing?

1

Hi guys,

I am currently working on my tribute page but i have run into a strange issue. I am unable to change the font size of the text in my second jumbotron, but the font-size in my first jumbotron has been working perfectly fine. At first i thought it was some kind of underlying issue with specificity, so i gave all of the paragraphs in the jumbotron a class and tried to alter the font size but it still wouldn’t work.

here is my pen http://codepen.io/Modestas/pen/aBPQem

Thank you for taking the time out of your day to respond.

2

You should use classes insead of id’s…
Like .italic instead of #italic.

3

I love Bootstrap, but sometimes it can complicate things you’d expect to work normally in CSS. It’s not Bootstrap’s fault in particular, as any CSS library will do the same. In this case, what I think is happening is the div with class container in your second jumbotron is setting the font-size property, so your text-filled elements aren’t inheriting it from the div you’re setting it on. Specifying the p tags does change the font-size:

#jumbo2 p {
   font-size: 3em; /* makes the font fantastically huge */
}

Some more general advice: don’t use two jumbotrons on your future projects. It seems like it shouldn’t matter if it works (and for this project, it doesn’t matter), but the creators of Bootstrap intended for the jumbotron to be that one thing on your page that’s front-and-center, and having more than one makes the code unwieldy.

1 Like