Use Responsive Design with Bootstrap Fluid Containers - Position of Div Tags

Use Responsive Design with Bootstrap Fluid Containers - Position of Div Tags
0

#1

Tell us what’s happening:
Hi, this is my first post ever, so hope I’m doing it right. I like to clarify, when the question says HTML elements, does it mean everything including the style tag?

I see that the correct or model solution way is to place the div tag is after the style tag, but I tried to put it before the style tag and it still seemed to be an accepted answer.

Does it actually make any difference where you put the div tags? before or after style, or is it more a standard convention that most people put it after style

Hope this makes sense.

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>```
**Your browser information:**

Your Browser User Agent is: ```Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36```.

**Link to the challenge:**
https://www.freecodecamp.org/challenges/use-responsive-design-with-bootstrap-fluid-containers

#2

For this particular challenge and most others, HTML refers to the part below the style section. However, technically <style> is a special element itself.

In general it is best practice to put the style at the top and “html” like divs below that. Even better is to have a separate file (ending in .css) to contain the style/css information to keep it separate from the HTML.


#3

@randelldawson
Thanks alot, that helps :smiley: