H1's wonky

My concern comes from the <h1> tags on lines 8 and 18… in his tutorial, the inner divs <div class="col-md-4"> continue horizontally across the screen, as soon as I deleted the <h1> on line 8 they do, but when I put it back they go down the screen vertically… any thoughts on what I’m overlooking?

at the end of the first video, I have the following HTML, with JQuery and BootStrap loading as he has said we should…

<div class="container">
  <div id="header" class="text-center">
    <h1>Twithc TV</h1>
    <h2><a href="https://www.freecodecamp.com" target="_blank">Free Code Camp</a></h2>
    <h3 id="fccStatus" class=""> id="fccStatus" class=""</h3>
  </div>
  <div class="row">
    <h1> <!-- THE PROBLEM REVERTS WHEN I DELETE THIS H1 -->   
    <div class="col-md-4">
      Logo:
    </div><!-- close of logo -->
    <div class="col-md-4">
      DisplayName:
    </div><!-- close of display name -->    
    <div class="col-md-4">
      Status:
    </div><!-- close of status -->    
    </h1>
    <!-- -->
  </div>
  <!-- close of row -->
  <div class="followerInfo">
    followerInfo
  </div>
  <!-- followerInfo -->

</div>
<!-- close of container -->

http://codepen.io/TurtleWolf/pen/wJaYor
I’ve been following this tutorial…

You can’t have block level elements (div) inside another block level element (h1). That’s a big part of your problem.

If you want to style the text, add a class to the div with class=“row” that contains the other columns, then style the class accordingly.

1 Like

I’m following this tutorial and it’s working for him… I guess it may be bad practice, but he’s still getting the desired result…

For now I just deleted the outer H1, and made the 3 inner divs H1’s instead.

<div class="container">
	<div id="header" class="text-center">
		<h1>Twithc TV</h1>
		<h2><a href="https://www.freecodecamp.com" target="_blank">Free Code Camp</a></h2>
		<h3 id="fccStatus" class=""> id="fccStatus" class=""</h3>
	</div>
	<div class="row">

		<h1 class="col-md-4">
      Logo:
        </h1>
		<!-- close of logo -->
		<h1 class="col-md-4">
      DisplayName:
       </h1>
		<!-- close of display name -->
		<h1 class="col-md-4">
      Status:
      </h1>
		<!-- close of status -->

		<!-- -->
	</div>
	<!-- close of row -->
	<div class="followerInfo">
		followerInfo
	</div>
	<!-- followerInfo -->

</div>
<!-- close of container -->

I would not waste any further time on a tutorial that teaches invalid code.
Seriously, walk away and find something else.

Hit the drop down on the Codepen html editor, then choose “Analyze html”.

4 Likes

Like @SamA74 says, be very careful when following a tutorial - there are times that people are more lucky than good.

This css works:

.header { font-size: 2.5rem; 
          font-weight: 500;
        }

.row    { border: 1px solid black; 
          border-radius: 10px; 
          margin: .5em auto; 
          padding: .5em 0 .5em 0; 
        }

with this html (note - I fixed obvious typos…):

<div class="container">
	<div id="header" class="text-center">
		<h1>Twitch TV</h1>
		<h2><a href="https://www.freecodecamp.com" target="_blank">Free Code Camp</a></h2>
		<h3 id="fccStatus">&nbsp;</h3>
	</div>
	<div class="row header">
		<div class="col-md-4">
      Logo:
    </div>
		<!-- close of logo -->
		<div class="col-md-4">
      DisplayName:
    </div>
		<!-- close of display name -->
		<div class="col-md-4">
      Status:
    </div>
		<!-- c;ose of status -->

		<!-- -->
	</div>
	<!-- close of row -->
	<div class="followerInfo row">
		<div class="col-md-4">
      Logo 1
    </div>
		<!-- close of logo -->
		<div class="col-md-4">
      Display Name 1
    </div>
		<!-- close of display name -->
		<div class="col-md-4">
      Status 1
    </div>
	</div>
	<div class="followerInfo row">
		<div class="col-md-4">
      Logo 2
    </div>
		<!-- close of logo -->
		<div class="col-md-4">
      Display Name 2
    </div>
		<!-- close of display name -->
		<div class="col-md-4">
      Status 2
    </div>
	</div>
	<!-- followerInfo -->
</div>
<!-- close of container -->

Codepen: http://codepen.io/davemaxwell/pen/EWjrBV

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.