Expanding footer to match dimensions of HTML webpage and customizing icons - a guide

I need assistance in making my 'footer' element stretch along the bottom of the page. Currently, it seems to fit around 95% of the bottom area. Additionally, I am looking for guidance on how to evenly space each icon towards the bottom left of the HTML page. Each icon has been assigned its own class.

Example: class='github'

HTML

<div class='footer'>
        <a href='https://github.com/'><img src='images/github-favicon.png' 
style="width:30px; height: 30px;" class='github'></a>
        <a href='https://www.linkedin.com/in/'><img src='images/linkedin-favicon.png' 
style="width: 30px; height: 30px;" class='LinkedIn'></a>
        <a href='https://www.instagram.com/'><img src='images/instagram-favicon.png' 
style="width:30px; height: 30px;" class='Instagram'></a>
        <a href='https://www.facebook.com/'><img src='images/facebook-favicon.png' 
style="width:30px; height: 30px;" class='facebook'></a>
   </div>

CSS

.footer {
clear: both;
background-color: green;
padding: 12px;
position: fixed;
bottom: 0px;
width: 98%;
display: flex;
}
htmlcss

Answer №1

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #263238;
    text-align: center;
    color: #f4f4f4;
}

.icons{
    padding-top: 1rem;
}

.icons a{
    text-decoration: none;
    font-size: 2rem;
    margin: 0.5rem;
    color: #f4f4f4;
}

.company-name{
    font-size: 1.6rem;
    margin-top: 0.5rem;
}

@media (max-width: 500px){
    html{
        font-size: 50%;
    }
}    

@media(min-width: 501px) and (max-width: 768px){
    html{
    font-size: 50%;
    }
} 
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer</title>
    <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./Footer.css">
</head>

<body>
    <footer class="footer">
        <div class="icons">
           <a href="#"><i class="fab fa-facebook"></i></a>
           <a href="#"><i class="fab fa-linkedin"></i></a>
           <a href="#"><i class="fab fa-instagram"></i></a>
           <a href="#"><i class="fab fa-twitter"></i></a>
            <p class="company-name">
                XYZ &copy; 2023, ALL Rights Reserved
            </p>
        </div>
    </footer>
</body>

</html>

Answer №2

To achieve better styling, it is recommended to discard the default style and transition away from using float. Instead, embrace the flexibility of flexbox and grid layout systems for a more efficient design approach.

* {  
    margin: 0;
    padding: 0;
 }

 .header{
    height: 90vh;
    width: 100%;
    background: lightcoral;
 }

 .footer{ 
   height: 10vh;
   width: 100%;
   background: green;
   /*now for footer children*/
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
   grid-gap: 5px;
  }

  .footer img{
    width: 50%;
    height: auto;

  }

  .footer img:first-child{
    margin-left: 10px;
  }
 <div class="header">
        <!-- parts before footer -->
    </div>
    <div class='footer'>
            <a href='https://github.com/'><img src='images/github-favicon.png' class='github'></a>
            <a href='https://www.linkedin.com/in/'><img src='images/linkedin-favicon.png' class='LinkedIn'></a>
            <a href='https://www.instagram.com/'><img src='images/instagram-favicon.png'  class='Instagram'></a>
            <a href='https://www.facebook.com/'><img src='images/facebook-favicon.png'    class='facebook'></a>
       </div>

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 is preventing me from adding any style to this specific element?

Currently, I am in the process of creating a stopwatch for solving Rubik's cube. Within this project, there is a div element named "records" that is meant to display the time after a button is clicked. However, I am facing an issue where I am unable t ...

javascripthtmlcssdom

Angular 5: ngFor Array issue with updating DOM view not resolved until 2nd click

Currently, I am utilizing the contact API to retrieve a list of contacts. contacts = new Array<Object>(); public signIn() { this.getContacts().then((res)=>{ console.log("res",res); this.contacts = res; }) } Below is the H ...

javascripthtmlangularangular5

Challenges arise when utilizing the foundation 6 grid for image overlays within a React application

Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is re ...

javascriptcssreactjssasszurb-foundation

Tips for shutting down the camera within a modal by utilizing Html5 QrCode Scanner in ASP.NET MVC

Hey there! I'm currently working with the Html5 QrCode library to implement a scanner, and I've integrated it into a modal. However, I'm facing an issue where the camera continues running even after I close the modal. I'm wondering if t ...

javascripthtmlasp.netasp.net-mvcqr-code

How can I show the content of a variable in Next.js without displaying any HTML tags?

For instance, I have the description variable set up like this in NextJS: description={storeDetail?.translation?.description} When outputting the description, it shows me <p>Tenis</p>. However, I would prefer to display just "Tenis" without th ...

htmlnext.js

There was a problem compiling the template and an error occurred in the mounted hook

I am encountering a slight issue with testing Vuejs and I am unsure how to resolve the error. Error1: "[Vue warn]: Error compiling template: Component template should contain only one root element. If you are using v-if on multiple elements, use v-e ...

htmlvue.jsvuejs2

Issues with encoding charset in Vite server (ISO-8859-15)

While utilizing a Vite server with vanilla JS for development or build purposes, I encountered an issue where charset encoding changes within the index.html file. Despite the widespread usage of utf-8 encoding, I have specific requirements that necessitate ...

htmlnode.jscharacter-encodingviteiso-8859-15

Utilize REMOTE_ADDR in a separate document

I am facing an issue with my Python code. Here is the content of file1.py : import os, sys, platform, getpass, tempfile import webbrowser import string import json import cgi, cgitb def main(addr, name): os.environ["REMOTE_ADDR"] = addr print os.envi ...

pythonhtmlclient-serverglobal-variablescgi

Change in navigation bar appearance on scroll down

I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...

css

A guide on verifying a phone number using just one character

I am looking to validate a phone number with only one character being allowed. For example, the format should be XXX-XXXXXXX where "-" is the only allowed character. Below is my validation function: function validatePhoneNumber() { if(addform.staff_m ...

javascripthtmlcss

Conceal/Reveal the visibility of the webkit scrollbar when scrolling

I'm attempting to create a unique user experience where the scrollbar is initially hidden using opacity. Then, when the user interacts with the page by scrolling or hovering over the scrollbar, it fades in smoothly thanks to CSS transitions. Finally, ...

javascriptjqueryhtmlcss

Google Chrome's number input type trims its rendering

When using the number input type in Chrome, the appearance of the input boxes is different, with the numbers appearing bottom-trimmed. Is there a way to fix this issue without adjusting the size of the input controls? Any assistance would be greatly appre ...

htmlcssgoogle-chromewebkit

Is there a way to select a specific time once and have it applied to every day in vue js?

Currently, I am in the process of gathering working hours from users. The challenge lies in having them select a time for each day individually which can be quite time-consuming. To streamline this process, I would like to implement a solution where users ...

javascripthtmlvue.jsvue-componentvue-router

Alert: Ajax encountered an issue with the auto-refreshing field

When running a script I created for a self-updating field, I encountered the following error message: UpdateField.html:37 Uncaught ReferenceError: fieldname is not defined at HTMLInputElement.onchange (UpdateField.html:37) Script: https://i.sstatic.n ...

javascriptphphtmlajax

Enhance your theme property in Styled Components by incorporating numerous style properties

Currently, I am delving into the world of styled components for a fresh project and exploring the theming capabilities it offers. I am finding it challenging to determine the best practice for adding multiple style properties to a single object, essentiall ...

cssreactjsreact-nativestyled-components

Using angularJs code within a JSP file: A comprehensive guide

I am facing an issue when trying to include angular code within a .jsp file. The error message I received is: "Multiple annotations found at this line: - Start tag of element - Undefined attribute name (ng-app)." Can someone provide guida ...

angularjseclipsehtmljspangularjs-directive

What's the best way to position menu items vertically in a navbar?

I've been struggling to vertically center the menu items "TEST 1","TEST 2" and "BRAND" within the navigation bar without any luck. I've experimented with vertical-align, margin-top, and bottom properties. What I'm aiming for is to have them ...

htmlcsstwitter-bootstrap-3

What is the process for initializing the default/prefilled value of an input element within a mat-form-field when the page loads?

I'm looking to create an HTML element where the default data (stored in the variable 'preselectedValue') is automatically filled into the input field when the component loads. The user should then be able to directly edit this search string. ...

htmlangulartypescriptangular-material

HTML Table Column Alignment: Ensuring a Clean and Organized Layout

I'm currently working on constructing tables that demonstrate parent/child connections. Consider this example. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_em ...

htmlcssbootstrap-5

Do DOM elements operate synchronously?

I am curious about whether DOM node attributes are synchronous when it comes to styling information. The article I was reading mentioned that scripts requesting style information like "offsetHeight" can trigger incremental layout synchronously. The arti ...

htmlcssdomstyling