Footer rises with bootstrap zooming

Question

Footer rises with bootstrap zooming

Hey everyone! I'm a beginner in the world of web development and currently working on creating my own website. I've run into an issue with my footer - I want it to stay fixed at the bottom even when zoomed in, but for some reason, when I zoom in, the footer moves up as shown in the screenshot below. I've tried searching for a solution online but haven't been able to find one. Can anyone help me out? SCREENSHOT ALL CODE:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
    ... (code continues)
    ...
</style>

</html>

HTML:

<footer class="page-footer font-small blue pt-4">
        <div class="container-fluid text-center text-md-left">
            <div class="row">
                <div class="col-md-6 mt-md-0 mt-3">
                    <h4 class="text-uppercase"><b>About</b></h4>
                    <p>Bright World is a multinational corporation headquartered<br>in Pakistan, one of the largest
                        electronics companies in the<br>world, currently focused in the area of lighting. It
                        was<br>founded in  by Gerard Mark and his father<br>Frederik, with their
                        first products being light bulbs.</p>
                ...
                ... (code continues)
                ...
        <div class="footer-copyright text-center py-3">© Copyright 2021 BrightWorld
        </div>
    </footer>

CSS:

.page-footer {
        background-color: #1B1B1B;
        color: white;
        position: relative;
    }
    .footer-copyright {
        background-color: #090909;
        color: white;
    }
    ...
    ... (css code continues)
    ...

Before zooming in chrome: https://i.sstatic.net/7xmgE.jpg After zooming in 125% in chrome: https://i.sstatic.net/fuqNb.jpg

html css bootstrap-4 footer

Answer 1

Answer №1

To ensure correct sizing, it is important to verify the height of both the header and footer before making any adjustments.

Here are the steps to follow in order to check the height:

Inspect the element on the tag and hover over the footer tag to determine if the height matches that of the following tag.

https://i.sstatic.net/AAMIK.jpg

.content-area {
    height: cal(100vh - 413px);
}

remove: 

body {
    height: calc(100vh - 100px);
}

<section class="content-area">
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</section>

replace with

<div class="container">
        {% block content %}{% endblock %}
    </div>

Answer 2

To ensure correct sizing, it is important to verify the height of both the header and footer before making any adjustments.

Here are the steps to follow in order to check the height:

Inspect the element on the tag and hover over the footer tag to determine if the height matches that of the following tag.

https://i.sstatic.net/AAMIK.jpg

.content-area {
    height: cal(100vh - 413px);
}

remove: 

body {
    height: calc(100vh - 100px);
}

<section class="content-area">
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</section>

replace with

<div class="container">
        {% block content %}{% endblock %}
    </div>

Answer 3

Answer №2

If you want to keep the footer at the bottom, follow these steps: Remove the '<br>' tag before the container div and add the full-height class to the container div.

<div class="container full-height">
   {% block content %}{% endblock %}
</div>

Next, remove this styling:

body {
    height: calc(100vh - 100px);
}

Replace it with this styling:

.container.full-height {
    height: calc(100vh - 413px);
 }

The value of 413px comes from the total height of the header and footer sections.

For reference, here is the JSFiddle link: https://jsfiddle.net/yudizsolutions/9f2vy3wr/5/
I hope this explanation helps!

Answer 4

If you want to keep the footer at the bottom, follow these steps: Remove the '<br>' tag before the container div and add the full-height class to the container div.

<div class="container full-height">
   {% block content %}{% endblock %}
</div>

Next, remove this styling:

body {
    height: calc(100vh - 100px);
}

Replace it with this styling:

.container.full-height {
    height: calc(100vh - 413px);
 }

The value of 413px comes from the total height of the header and footer sections.

For reference, here is the JSFiddle link: https://jsfiddle.net/yudizsolutions/9f2vy3wr/5/
I hope this explanation helps!

Footer rises with bootstrap zooming

Answer №1

Answer №2

Similar questions

Learn the process of sending notifications upon clicking on an advertisement by a user

Error: Property '$filter' is not defined and cannot be read

Altering the "src" property of the <script> tag

Tips for incorporating a value within the AngularJS select function

Adding the !important rule in React inline CSS effortlessly

including information inputted into a form into a data-storage system

Attempting to showcase JSON response within an HTML page using JavaScript

Using Angular with Bootstrap to implement a typeahead feature

Does CSS media query "@media only screen" only work when I am resizing the window?

issues with the functionality of bootstrap modal

Having trouble with the Bootstrap 5 modal in the initial template?

Is there a way to create a marker that changes color when hovering over the text directly below it?

Increment counter when a key is pressed in Angular 4 and decrement when the backspace key is pressed

Unique styling implementation for element situated underneath Angular 6 router-outlet

Scrolling problems with numerous bootstrap modals on a Webpage

The fundamental principle of starting with mobile design in Bootstrap

How can a single item from each row be chosen by selecting the last item in the list with the radio button?

Populating a dropdown list with options

How can you extract information from a text document and seamlessly incorporate it into an HTML webpage?

Obtain data using a REST request from a webpage or web server