Excessive gap following the footer

I'm facing an issue where my footer has extra space at the end which is also in the background color of the page. How can I resolve this?

footer {
    text-align: center;
    background-color: orange;
    margin-bottom: -200px;
    height: 5em;
}

.contact {
    padding: 0px;
}

.contact a {
    color: black;
    margin-top: 30px;
}  

    
<footer>
  <div class="container contact">
    <div class="row">
      <div class="col-md-12 align self-center">
        <p> Created with ❤ by Team PitchTeen </p>
        <a class="contact-link" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="295d4c484459405d4a415d5e5878434044578249404257884549">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2b6a7a3afb2abb6a1abbaadb29fa1beaaa8bba1eca7aba9">[email protected]</a></a>
      </div>
    </div>            
  </div>
</footer>

htmlcssfooter

Answer №1

When referring to the "unnecessary space of 2 lines in the end," are you talking about the padding at the bottom after the link? If so, you can simply delete the height property from the footer CSS like this:

footer {
    text-align: center;
    background-color: orange;
    margin-bottom: -200px;
    /*height: 5em;*/
}

/* This is also unnecessary now
.contact {
    padding: 0px;
}*/

.contact a {
    color: black;
    margin-top: 30px;
}  
<footer>
  <div class="container contact">
    <div class="row">
      <div class="col-md-12 align self-center">
        <p> Made with ❤ by Team PitchTeen </p>
        <a class="contact-link" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d59484c405d44594e45594848436d4a404c544546434b02">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0571606468756c71666d7160606b45626864607577704a03">[email protected]</a></a>
      </div>
    </div>            
  </div>
</footer>

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

Why does this element on Safari have a focus outline appearing even before it is clicked?

The issue is occurring specifically in Safari, and you can see it firsthand by clicking the "chat now" button located in the lower right corner of the screen: Upon clicking the "chat now" button, the chat window's minimize button displays a focus out ...

csssafarifocusaccessibility

Is it possible to utilize the lighten css property within ngStyle in Angular?

Having some trouble with the lighten property in ngStyle and it's not working as expected. I have a color variable within my component that I want to utilize like so: <div [ngStyle]="{color: schedule.group.color, background: 'lighten(' ...

htmlcssangular

Javascript issue: opening mail client causes page to lose focus

Looking for a solution! I'm dealing with an iPad app that runs html5 pages... one specific page requires an email to be sent which triggers the Mail program using this code var mailLink = 'mailto:' + recipientEmail +'?subject=PDFs ...

javascriptioshtmlipadmailer

Tips for building dynamic drop downs with JavaScript?

I'm currently working on a personal project and I've hit a roadblock when it comes to saving and utilizing the selections made from dropdown lists. For instance: <select id = "CarType" onchange = "cartype()"> <option value = "car"&g ...

javascriptjqueryhtml

Could you please let me know how I can align underneath?

Image description can be found here Your assistance is greatly appreciated, as I am currently inexperienced with React and JavaScript. I am self-studying, so please excuse any basic questions. I have encountered a challenge with this issue. In the image ...

cssreactjs

Is it possible to employ getBoundingClientRect() for several elements sharing the same class?

I'm in the process of implementing sticky navigation on my website that will dynamically change as users scroll through different sections. Specifically, when scrolling over a section marked with the class .dark, I want the logo and text color to swit ...

javascripthtmlcss

Modifying the div based on the color it is positioned in front of

I am attempting to create a sticky, transparent div that changes its color based on the background behind it. I have both dark and light colored divs, and I want the sticky div to adjust its text color accordingly (white on dark backgrounds, black on light ...

htmlcss

Is there a problem with addEventListener returning false?

What does keeping the third parameter as false in the line below signify? var el = document.getElementById("outside"); el.addEventListener("click", modifyText, false); ...

javascriptjqueryhtml

Incorporating a scrollbar into a CSS content accordion for enhanced user experience

Currently, I am exploring a tutorial for coding a content accordion which can be found here: I am wondering about the possibility of adding endless content to each section while incorporating a scroll bar. Any suggestions on how to achieve this? Apprecia ...

htmlcss

Is there a way to show new chat messages instantly without needing to refresh the entire page?

Creating a real-time chat application presents the challenge of displaying new messages instantly without requiring a page reload. Exploring different methods like reloading only the chat message container or treating new messages as individual chatMessage ...

javascriptpythonhtmlcssdjango

Tips for achieving a seamless transition in width for a React component using Material UI

In my project using React and MUI 5, there is a <div>{text}</div> element with a custom border style. The text variable is a string that gets initialized and updated using the setText function. Initially, when the text variable is empty, the w ...

cssreactjsmaterial-ui

Setting a background image in ReactJS

I've been struggling with this issue for a while now, and after doing a lot of research online, I came across a solution that is supposed to work in index.css body { background-image: url(../src/components/images/photo.jpeg) no-repeat center cent ...

javascriptcssreactjs

Utilizing jQuery to Select Check Boxes Alongside Labels

In my jQuery code, I have a simple trigger set to run when a radio button is clicked in order to check certain checkboxes on the page. <script> jQuery('#op5').click(function () { $('input[type=checkbox]'). ...

javascriptjqueryhtml

Issue with displaying Bootstrap 3 modal on Mozilla browser

Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code: <button type="b ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

I am facing issues with my Bootstrap and CSS conflicting with each other in React JS

My styles are mysteriously changing when I add the bootstrap link between the <head></head> tags. Here is the header without the bootstrap link: https://i.sstatic.net/ly2nf.png And here is the header with the bootstrap link: https://i.sstatic ...

javascriptcssreactjsbootstrap-4jsx

Craft a dynamic countdown timer that blinks using CSS

I am attempting to design a blinking countdown timer that starts at 5 seconds and disappears when it reaches 0. CSS: .blinky { transition: 1s opacity; -moz-transition: 1s opacity; -webkit-transition: 1s opacity; } HTML: <div id="count ...

javascriptcss

Is it possible to transfer data from a JavaScript file to the Express server without relying on a form submission?

As a newcomer here, I apologize if I overlook any best practices. Currently, I am in the process of developing a sudoku game using express, JavaScript, HTML, and mongoDb. My current challenge involves setting up a statistics system. My goal is to send da ...

javascripthtmldatabaseexpressejs

Is it possible to create varied background shades in CSS3 without relying on images?

Check out this fiddle: http://jsfiddle.net/dzAJp All the divs are styled with a light blue background color using the background-color CSS property instead of background-image. I want to darken the second div slightly by combining its current background ...

css

Hide the chosen option within the following select box using jQuery

How can I hide the selected option in the first select box in the second one using jQuery? Here is my HTML code. <div> <select class="fields-mapping"> <option>Option1</option> <option>Option2</option> <op ...

javascriptjqueryhtmlselect

Adjust the text color within an input field or a text area

I'm looking to customize the text color inside an input field, specifically making it white. Here is a reference image to demonstrate what I mean: https://i.sstatic.net/JJomd.png Below is the code snippet that achieves this effect: <v- ...

cssvue.jsvuetify.js