1: Creating a footer


We have added all of the main content and functionality to our web app. The last code snippet we need is a footer that goes at the bottom of all web pages.

 

Create a footer.html

env > mysite > main > templates > main > includes > (New File) footer.html

Create Django footer.htmlGIF

Create a new file named footer.html in the templates > main > includes folder.

 

Edit the footer.html

env > mysite > main > templates > main > includes > footer.html

<!--Footer-->

    <footer>
        <div class="container-fluid bg-dark text-light mt-5 pt-5">
            <div class="container py-5">
                <div class="row">
                  
                </div>
            </div>
        </div>
    </footer>

Add a division element with class attributes container-fluid, bg-dark, mt-5, and pt-5. Nest a new container with py-5 inside container-fluid. Then nest a division element with class attribute row within the container. 

 

<!--Footer-->

    <footer>
        <div class="container-fluid bg-dark text-light mt-5 pt-5">
            <div class="container py-5">
                <div class="row">
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">  
                        
                    </div>
                </div>
            </div>
        </div>
    </footer>

Nest three columns in the row. Two columns will have the class attributes col-md-3 col-lg-3 col-sm-12. The last column will have the class attributes col-md-6 col-lg-6 col-sm-12.

 

<!--Footer-->

    <footer>
        <div class="container-fluid bg-dark text-light mt-5 pt-5">
            <div class="container py-5">
                <div class="row">
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <h6>Contact Us</h6>
                        <p class="font-weight-light">info@encore.com</p>
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">  
                        
                    </div>
                </div>
            </div>
        </div>
    </footer>

Add a contact email to the first column.

 

Add social media links to the footer.html

env > mysite > main > templates > main > includes > footer.html

<!--Footer-->

{% load static %}

    <footer>
        <div class="container-fluid bg-dark text-light mt-5 pt-5">
            <div class="container py-5">
                <div class="row">
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        ...
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        <h6>Follow Us</h6>
                        <p class="font-weight-light">
                            <a href="#"><img src="{% static "img/facebook.png" %}" alt="Facebook" class="img-fluid" style="width: auto; height: 30px; object-fit: scale-down;"></a>
                            <a href="#"><img src="{% static "img/instagram.png" %}" alt="Instagram" class="img-fluid" style="width: auto; height: 30px; object-fit: scale-down;"></a>
                        </p>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">  
                       
                    </div>
                </div>
            </div>
        </div>
    </footer>

Load static at the top of the page so we can add social media logos as links in the next column. The links would lead directly to the appropriate Facebook and Instagram pages. However since this is only an example, we will leave the hyperlinks blank.

 

Include the affiliate disclosure

env > mysite > main > templates > main > includes > footer.html

<!--Footer-->

{% load static %}

    <footer>
        <div class="container-fluid bg-dark text-light mt-5 pt-5">
            <div class="container py-5">
                <div class="row">
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        ...
                    </div>
                    <div class="col-sm-12 col-md-3 col-lg-3">
                        ...
                        </p>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6">  
                        <h5>
                            <img src="{% static "img/logo.png" %}" width="30" height="30" alt="logo">
                            Encore
                        </h5>
                        <p style="font-size: 12px">We are proud to provide quality content and product information to our users. There are links on this site that can be defined as “affiliate links”. Encore receives a small commission (at no cost to you) if you purchase something through these links. Encore is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed for sites to earn advertising fees by advertising and linking to amazon.com.  Feel free to reach out to us if you have any questions.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

In the last column, we will add the affiliate link disclosure. Affiliate websites require a disclosure about how income is generated.  For example, look into Amazon's Associate Program disclosure

 

Create a container for the copyright

env > mysite > main > templates > main > includes > footer.html

<!--Footer-->

{% load static %}

    <footer>
        <div class="container-fluid bg-dark text-light mt-5 pt-5">
            <div class="container py-5">
                ...
            </div>
            <div class="container text-center py-3">
                
            </div>
        </div>
    </footer>

Nest a new container division within the container-fluid element. This container is still within the footer and container-fluid division elements, just not in the first container division element. The new container will contain text-center and padding top and bottom (py-3) as class attributes. 

 

<!--Footer-->

{% load static %}

    <footer>
        <div class="container-fluid bg-dark text-light mt-5 pt-5">
            <div class="container py-5">
                    ...
            </div>
            <div class="container text-center py-3">
                <p style="font-size:12px">Copyright © 2020 All Rights Reserved.</p>
            </div>
        </div>
    </footer>

Finally add Copyright © YEAR All Rights Reserved. to the division element. You could also do © website.com. All Rights Reserved. If you own a company associated with the website use © Company Name. All Rights Reserved.

 

Include the footer.html in the header.html

env > mysite > main > templates > main > header.html

<!DOCTYPE html>
<html>
  <head>
    {% load static %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Encore</title>
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  </head>
  <body>
    
    {% include 'main/includes/navbar.html' %}

    {% include 'main/includes/messages.html' %}

    {% block content %}

    {% endblock %} 
      
    {% include "main/includes/footer.html" %}

    <!-- Optional Javascript -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

After the end of the block content, add the code {% include "main/includes/footer.html" %} so the footer will render on all pages. Save the file and open the web app in the browser. All pages will have a footer at the bottom. 

Footer with copyright








2: Using Bootstrap scrollspy


Let's use Bootstrap's scrollspy so when the "Contact" link is clicked, the viewport will automatically scroll down to the contact information located in the footer.

 

Add an id attribute to the footer.html

env > mysite > main > templates > main > includes > footer.html

<!--Footer-->

{% load static %}

    <footer id="contact">
        ...
    </footer>

Let's start by adding an id attribute in footer.html. An id attribute is similar to a class attribute except it's value must be unique for a given element.

Add the id attribute contact to the footer element then save the changes to the file.

 

Add a contact scrollspy to the navbar.html

env > mysite > main > templates > main > includes > navbar.html

{% load static %}

  <!--Navbar 1-->
  ...

  <!--Navbar 2-->
  <div class="container-fluid sticky-top bg-dark">
    <nav class="container navbar navbar-expand-md navbar-dark">
      <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
          {% for tag in nav_tags %}
            <li class="nav-item">
              <a class="nav-link" href="/blog/{{ tag.tag_slug }}">{{ tag.tag_name}}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
      <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/products">Products</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/blog/articles">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

Open navbar.html and add #contact to the href attribute of the contact link. Id's are called with a # in front of the id attribute value. We don't need to add the / before the value because the footer is on every page, not just the homepage.

Reload any of the project pages in the browser and click on the "Contact" link. They will all take you to the footer at the bottom of the page.








3: Checking device compatibility


The web app is completed and looks nice on a desktop or laptop, but how does it look on other devices? To find out, go to the browser window where our project is running and a follow the instructions below.

 

How to check device compatibility

Check device compatibility on ChromeGIF

Click on the three vertical dots in the upper right side of the Google Chrome browser. Find the option called "More Tools" then click "Developer tools". Click the devices icon in the upper left side of the developer tools panel to display the device toolbar.

 

How to change the viewport size

Change viewpointsGIF

If you click on the drop down menu in the center of the screen, you will see a list including iPhone, iPad, Galaxy, among other common mobile devices. Selecting one will change the viewport of the web page to match the screen size of the device.

If you wish to see the web page in other viewports, click the Responsive option and move the sides of the viewport to change device sizes. Specific width and height dimensions can also be set.

 

Check device compatibility for our website

Homepage on iphone 5
An article on iphone 5
Another article on iphone 5

Look through the entire website on an extra small device, ideally the smallest of the default devices offered. Then look through the small (600px and up) and medium (768px and up) viewports using the Responsive setting. You can always check the larger viewports but chances are they work given that you likely coded the website on a large device (i.e. a laptop or desktop).

Did you notice anything that looks out of proportion or displaced at smaller viewports? The images above are taken from the iPhone5 viewport.








4: Using media queries


The website looks nice on larger devices but on smaller devices, like phones and tablets, the text is over-sized and even causing overlapping issues on some pages.

But other than the text, everything else appears to automatically resize with the viewport. Thank Bootstrap for this feature because without it, images, spacing, and numerous other elements would require their own media queries. For this project, all we need to do is add media queries to a few of the text elements to solve our device compatibility issues.

 

Add a custom class attribute to the CTA message

env > mysite > main > templates > main > home.html

{% extends 'main/header.html' %}

  {% block content %}

  {% load static %}
       

  <!--CTA-->
  <div class="cta-banner"> 
    <div class="container py-5">
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-6 pb-4">
          <h1 class="cta-message display-4 font-weight-bold">Elevate your listening</h1>
          ...
      </div>
    </div>
  </div>

  ...

  {% endblock %}

Open the home.html and add cta-message to the class attribute of the heading one element. Save the change to the file.

 

Correcting the size of the CTA message for extra small devices

env > mysite > main > templates > main > home.html

    <style>
	    .cta-banner {
	      background-image:
	      /* The image fade to white */
	      linear-gradient( to left, rgba(0,0,0,0) 10%, #fff 85%),
	      /* The image used */
	      url("{% static "img/cta-headphones.jpg" %}");
	      /* Set a specific height */
	      height:400px;
	      /* Create the parallax scrolling effect */
	      background-attachment: fixed;
	      background-position: center bottom;
	      background-repeat: no-repeat;
	      background-size: cover;
	      z-index: auto;
	      position: relative;
	    }

		@media only screen and (max-width:600px) {
			.cta-message {font-size:50px !important;}
		}
	</style>

Go to the style element at the bottom of home.html.  Smaller devices seem to be the only viewports with too large of a font-size. Let's fix the sizing by adding a media query for screens with a maximum-width of 600px (i.e. phones) that sets the cta-message font-size to 50px.  You might have noticed we also used the !important property to ensure the media query overrides any other font-sizes connected to the heading element.

Refresh the page, you may need to perform a hard refresh if the newest version did not load.  The text should no longer push the CTA button below the banner on smaller viewports.

Homepage on iphone5
Homepage on iphone 5 with media query

 

Add a custom class attribute to fix article headings

env > mysite > main > templates > main > article.html

{% extends "main/header.html" %}

    {% block content %}

    <!--Article-->
    <div class="article-banner text-center">
        <br><br>
        <div class="container">
            <h1 class="article-heading font-weight-bold">{{ article.article_title }}</h1>
            ...
        </div>
    </div>

    ...


    {% endblock %}

The article titles on the article pages also seem over-sized on extra small and small devices since the text is pushing the article tags off of the cover image. 

To alleviate this issue, add article-heading to the class attribute of the element containing the title. 

 

Correcting the size of the article headings for extra small to medium devices

env > mysite > main > templates > main > article.html

	<style>
        .article-banner { 
            background-image:
            /* The image fade to white */
            linear-gradient(to left, rgba(0,0,0,0) 10%, #fff 85%),
            /* The image used */
            url("{{ article.article_image.url }}");
            /* Set a specific height */
            height:200px;
            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: cover;
            z-index: auto;
            position: relative;
        }

        /* all devices up to 786px */
        @media only screen and (max-width:768px) {
        	.article-heading {font-size:22px !important;}
        }

    	/* devices 768px to 1200px */
    	@media only screen and (min-width:768px) and (max-width:1200px) {
    		.article-heading {font-size:27px !important;}
    	}
    </style>

Add the first media query for devices with a max-width of 768px to have a font-size of 22px.  We chose 768px since this is where we began seeing issues with the article title.  Then create another media query for devices 768px to 1200px to have a font-size of 27px to prevent any additional text overlap. Be sure to save the file with all of the changes. 

Refresh the page (you may need to perform a hard refresh). The text should now fit well in extra small and small viewports.

Article on iphone5
Article on iphone 5 with media query
 






Quiz Questions


1. Where does the footer.html template belong in the project?


2. What is the purpose of media queries?


Next lesson


Check out the comments and debug buttons if you get stuck.