FCC Survey Form passes test but doesn't look right

FCC Survey Form passes test but doesn't look right
0

#1

Hello group, my survey form passes all the tests but does not look right because the background color in the CSS only covers the bottom half of the screen. Since there are no errors to search on, I have no idea what to even look at to fix the problem.

Any help would be appreciated.

Code is here ---------->URL


#2
  1. Remove all HTML that is not directly inside the body, add the fcc test and bootstrap in the Codepen settings (click the Settings button up top).

  2. You are missing the closing div on the row inside your footer.


#3

closing div inside the footer. I know what a div and a footer is. There is a closing div already there. Adding an extra one does nothing. problem persists. I have no idea. Please be more specific.


#4

I am completely lost.


#5
  1. The footer
// You footer looks like this and is missing the closing div for the row div inside
<footer class="container-fluid">
  <div class="row text-center">
    <div class="col-12">
      <span>Coded by Greensleeves</span>                                    
    </div>
</footer>
// has closing div
<footer class="container-fluid">
  <div class="row text-center">
    <div class="col-12">
      <span>Coded by Greensleeves</span>                                    
    </div>
  </div> <!-- this is missing -- >
</footer>
  1. You need to only have the HTML from inside the body on Codepen, you don’t want anything less.

Here is a version that shows what i mean.


#6

Thanks lasjorg. It fixed the problem, but I still have to work out why it didn’t work so that I can resolve any other problems like it that may appear.


#7

When using Codepen it is just best to use the settings for, stuff from the head, external css/js libraries and only have the HTML from inside the body (you don’t need the body or any outer HTML because Codepen adds that automatically). It is always a little hard and confusing when trying to explain this about Codepen. Also, it doesn’t always break as it did for you, sometimes you can just paste a full page into Codepen and it works just fine, but it is better not to do that.

This article may be helpful in pointing out, some of what i am trying to explain.

Here is a more general tutorial on Codepen