Why my CSS code doesn't work?

Why my CSS code doesn't work?
0.0 0

#1

Could you please review this code? My CSS code related to body and h2 doesn’t work. I want the font to be Lobster and font-size to be 10px but it seems that the code doesn’t do what I want. Any hint?


#2

If you are using bootstrap, then you need to use rows and columns inside of the container-fluid. For example, you could put everything in a row just inside of your container-fluid. Then each section that you want to separate could go into a class=“col-12”. NOTE*** You can set up rows & columns many different ways, so this is not the only way to do it. It is merely a suggestion.*** Then change the css body style to something like first-col (call it anything you want) in the example below…

<div class ="row">
  <div class="col-12 first-col">
    <h1 class="text-center">John von Neumann</h1>
    <h2 class="text-center">The man who knew too much</h2>
  </div>

 ........continue placing each section that you want to be grouped in individual "col-12".

The css would change from body{margin} to first-col{margin}. I know this is a workaround, but I think the problem with targeting body is codepen. In a regular editor you shouldn’t have any problems.

As for the h2 issue, I’m not seeing the problem. It’s not working for me either, but then again I don’t use codepen much so maybe someone else will have a better answer for you.

Hope this helps!!!


#3

I forked your project here… https://codepen.io/billyderringer/pen/YQNJYG so you can see a better example of what I mean.


#4

It looks like the issue is how you are linking Bootstrap in CodePen. In the settings for the CSS settings, at the bottom you will see a ‘Quick-add’ dropdown option. Choose Bootstrap 3.

Also, delete the Bootstrap link in the HTML window.

Your code worked for me when I made these changes. Hope this helps.

btw – imho, 10px seems a little small for your h2 heading :slightly_smiling_face:


#5

Thank you guys. I tried it and it worked!