Debugging Layout Issues
Sometimes when you come to view your page in the browser the elements don't display as you expect, things are not lining up the way you expect them to, elements are inside each other or overlapping when they shouldn't be etc.
There can be multiple reasons for this, so here are a few things to check and resources to use as you debug the problem.
- Your HTML code may be invalid in some places. Running it through the HTML validator can often pull up problems that when fixed will help sort out your layout issues: https://validator.w3.org/
- Make sure your HTML elements are nested properly, meaning they are opening and closing as they should. If you open an element and nest another inside it, make sure the nested element is closed before the element it is inside is closed or your layout will get messy!
For example here the div is opened inside the section but closed after the section is closed.
This will cause layout issues
<section id="my-section"> <div class="nested-element"> Content </section> </div>
Here the <div> is nested correctly inside the <section>
<section id="my-section"> <div class="nested-element"> Content </div> </section>
To be sure your elements are being opened and closed in the right places, you can auto-format your code so corresponding opening and closing elements are directly above and below each other. To do this click anywhere in your HTML file then for GitPod click: ALT-SHIFT-F
If you are using Bootstrap:
- You may be using the Bootstrap Grid incorrectly. If you do not nest your container, row and column classes as Bootstrap requires, your grid will often not display as you want it to. I created a youtube video to demonstrate how to use it and get the most out of this great tool: https://www.youtube.com/watch?v=zDpCejbl1sU
- You may have written some CSS of your own that is overriding the default Bootstrap grid classes. Often it is a
position
property that has been added but it can be other things too.
To check if this is the case, temporarily break the link to your CSS file in the <head> of your HTML file and then reload the page. Then check to see if your layout issue has gone.
If it has, you know it is your own CSS that is overriding a bootstrap class. So add back in your own CSS link and then go to dev tools and inspect the elements to see what CSS you wrote might be the root of the problem.