What is the method for including footer content on a site that only has a masthead?

Is there a way to incorporate footer-type text with copyright disclaimer into a masthead-only website? I keep trying to add a footer, but it ends up getting stacked outside the masthead, causing the screen to become scrollable. My goal is to include the copyright and link to privacy terms within the masthead (reference images provided below).

I have documented my progress through attached images.

The objective is to display the copyright line differently based on the screen size:

  • For desktop: positioned at the bottom left aligned under the newsletter form (refer to the attached images)
  • For mobile: centered beneath the social logos (see images for reference)

Status of my current progress: The following screenshots demonstrate what has been implemented so far. Any advice or guidance would be greatly appreciated!

Here are the current views on desktop and mobile:

This is the desired implementation:

HTML:

<html lang="en">
    <!-- HTML code here -->
</html>

CSS:

html {
    height: 100%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Merriweather;
    font-weight: 700
}
/* CSS code continues */
.footer-text {
    padding: 10px;
    color: #fff
}

Answer №1

If you stumble upon this question:

Consider utilizing Bootstrap's 'mastfoot'.

To implement this, create the following divs outside of the masthead div:

<div class="mastfoot">
  <div class="inner-mastfoot">
    &copy; 2018 X Ltd. All Rights Reserved. &nbsp;&nbsp;&nbsp;&nbsp; • &nbsp;&nbsp;&nbsp;&nbsp; <a href="/legal">Legal</a> &nbsp;&nbsp;&nbsp;&nbsp; • &nbsp;&nbsp;&nbsp;&nbsp; <a href="/contact">Contact</a>
  </div>
</div>

Create styles for 'mastfoot' and 'inner-mastfoot' as shown below:

For mobile view:

.mastfoot {
color: #262626;
color: rgba(26, 26, 26, .5);
position: absolute;
bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 2
}

.inner-mastfoot {
font-size: 0.8rem;
text-align: center
}

For desktop view:

@media (min-width:768px) {

.mastfoot {
color:#999 !important;
color:rgba(255, 255, 255, .5) !important;
position:absolute !important;
margin:10px 0 0 4rem !important;
z-index:2
}

.inner-mastfoot {
font-size:0.8rem;
text-align:left !important
}

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What strategies can I use to include multiple spans within div elements without causing the code to become overly lengthy?

I'm working with 20 spans representing movie genres, each accompanied by another span that "closes" the genre when selected. The closing span has an .active class, similar to this example: My version currently looks like this: To achieve this, I hav ...

Arranging Content with Bootstrap Columns

I am trying to organize my content into three sections as follows: A - main content of page B - very important content (must be visible without scrolling) C - less important content. The current layout I have is like this: ----- |A|B| |A|C| ----- Howe ...

What is the best way to modify CSS and HTML with a post request?

I'm currently in the process of working on a webpage with multiple sections. One section includes a form that sends a POST request. Once this form is successfully submitted, I want to update the CSS style of another element to make it visible. Given ...

Using HTML5 to play video from a stored binary string

I have been attempting to extract the data from a video file in binary format using the FileReader.readAsBinaryString(Blob|File) method, as demonstrated in this example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files. My intention i ...

Textarea generated on-the-fly without any assigned value

My goal is to enable users to edit the text within a paragraph on a website. I am attempting to replace the <p> tags with <textarea> tags using the .replaceWith() function. However, when I try to retrieve the value of the textarea, it comes bac ...

Issue with jQuery's .height() method not updating

Here is the code I am working with: $(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto'); }); }); I am trying to change the height of a div when a link is clicked. After adding an alert ...

Clearing HTML Text Input Box When User Presses Enter

Currently, I am working on a lengthy program that is functioning almost flawlessly. However, there is one persistent issue: whenever I hit the Enter key while the text box is clicked, it clears the box and appends the data to the URL as if it were a GET re ...

The <input type="number"/> element is failing to display a numeric keypad on iOS devices

Based on the information from Apple's official documentation, setting up an input element with a type of number should result in a number keypad being displayed. <input type="number"/> number: This creates a text field specifically for en ...

The collapsed form-control is adjusting its attributes while resizing

Having trouble with a website design featuring a collapsed window and menu items, but the search bar is not displaying correctly? In image 3, you can see that the style of the search bar changes when the width exceeds a certain limit. I've tried vario ...

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

What's preventing my Angular list from appearing?

I am currently developing an Angular project that integrates Web API and entity framework code first. One of the views in my project features a table at the bottom, which is supposed to load data from the database upon view loading. After setting breakpoin ...

Issue with Sass @use failing to load partial

I'm currently facing an issue while trying to import a sass partial called _variables.scss into my main stylesheet named global.scss. Every time I compile the sass code, I encounter the following error message: Error: Undefined variable. Here is the ...

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

Bookmarklet does not successfully inject jQuery on a specific webpage

Trying to utilize a certain bookmarklet: javascript:void((function(doc){if(typeof jQuery=='undefined'){var script_jQuery=document.createElement('script');script_jQuery.setAttribute('src','https://code.jquery.com/jquery ...

Troubleshooting Vuetify's CSS problems related to responsiveness while utilizing Vue-Split-Panel and customizing select border appearance

Currently facing a range of CSS issues with Vuetify that I'm hoping to get some help resolving. Utilizing a split panel view (vue-split-panel) with Vuetify, there seems to be an inconsistency in triggering the full-column width when needed. It's ...

Horizontal Panning Feature for D3 Horizontal Bar Charts

I am working on a D3 Bar Chart and I would like it to have horizontal panning functionality similar to this example: https://jsfiddle.net/Cayman/vpn8mz4g/1/. However, I am facing an overflow issue on the left side that I need to resolve. Below is the CSV ...

Optimizing performance: Enhance readback operations in Canvas2D by enabling the willReadFrequently attribute for faster getImageData processing

I am currently utilizing the react-wordcloud package and encountering an issue where the word cloud adjusts to fit 70% of the screen size whenever the container size changes. My console is being flooded with this warning message: https://i.sstatic.net/vdV ...

The sticky header is malfunctioning due to a null offsetTop value

import React , {useRef, useEffect} from 'react' import './header.css' const nav_links =[ { path:'#home', display:'Home' }, { path:'#about', display:'About& ...

How can one transform a web-based application into a seamless full-screen desktop experience on a Mac?

"Which software can be utilized to enable a web application to display an icon on the desktop of a Mac computer, while also opening up the web application in a fully immersive full-screen mode that supports all the touch and gesture functionalities provi ...

Confirmation dialog with user-defined button text

When the confirm prompt box is used, it typically displays "ok" and "cancel" buttons. I am looking to customize the label text for the buttons to read as Agree and Not Agree instead. If you have any suggestions on how to achieve this modification, please ...