The Alignment of My Footer

My goal is to center the footer when it reaches the lg break point, so that the three columns appear as one column in 3 rows, positioned at the center of the page.

However, upon visiting the codepen link below, you'll notice that the second column isn't aligning properly with the first one.

https://codepen.io/Sunny143/pen/VybbGX?editors=1100

footer {
                margin-left: 0;
                margin-right: 0;
                background-color: #305C7A;
                position: absolute;
                bottom: 0px;
                width: 100%;
                height: auto;
            }

            footer h3 {
                color: white;
                text-decoration: underline;
                text-decoration-color: white;
            }

            footer p {
                color: white;
                width: 100%;
                align-content: center;
                align-items: center;
                justify-content: center;
            }

            footer span {
                color: white;
            }

            .address {
                float: left;
                padding: 35px;
                padding-bottom: 50px;
                width: 30%;
                margin-left: 4%;
                margin-right: 4%;
            }

            .Main-address {
                float: left;
                width: 30%;
                padding: 35px;
                text-align: left;
                margin-left: 4%;
                margin-right: 4%;
            }

            .contact-info {
                float: left;
                position: relative;
                padding-bottom: 50px;
                padding: 35px;
                width: 30%;
                text-align: left;
                margin-left: 4%;
                margin-right: 4%;
                margin-bottom: 35px;
            }

            .copyright {
                position: absolute;
                bottom: 0px;
                width: 100%;
                height: 35px;
                background-color: #111B22;
                align-items: center;
                margin-bottom: 0%;
            }
<footer>
                <section class="address col-lg-3 col-md-12 col-sm-12">
                    <h3>Branch Office</h3>
                    <span class="Name">SambaSiva Rao Muvva</span><br>
                    <span class="qual">B.com., A.C.A</span>
                    <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
                </section>
                <section class="Main-address col-lg-3 col-md-12 col-sm-12">
                    <h3>Head Office</h3>
                    <span class="Name">Konduru Anil Kumar</span><br>
                    <span class="qual">B.com., A.C.A</span>
                    <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
                </section>
                <Section class="contact-info col-lg-3 col-md-12 col-sm-12">
                    <h3>Contact Information</h3>
                    <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
                    <span class="Email-ID">Email :</span><span class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="325153415f5350531c5341415d41515b5346574172555f535b5e1c515d5f">[email protected]</a></span>
                </Section>
                <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
            </footer>

htmlcssbootstrap-4

Answer №1

The alignment of the blocks is off due to them all being floated, causing a stacking issue where the third block appears below the second one. You can find more information on this problem here: Floated elements of variable height push siblings down

To fix this, remove the float property and make proper use of Bootstrap classes like container/row for correct behavior of the div elements. Additionally, you can add text-align:center when reaching the lg breakpoint:

footer {
  margin-left: 0;
  margin-right: 0;
  background-color: #305C7A;
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: auto;
}

footer h3 {
  color: white;
  text-decoration: underline;
  text-decoration-color: white;
}

footer p {
  color: white;
  width: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
}

footer span {
  color: white;
}

.address,.contact-info,.Main-address  {
  padding: 35px;
}

.copyright {
  width: 100%;
  height: 35px;
  background-color: #111B22;
  align-items: center;
  margin-bottom:0;
}

@media all and (max-width:991px) {
.address,.contact-info,.Main-address  {
  text-align:center;
}

}
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<footer>
  <div class="container">
    <div class="row justify-content-around">
      <!-- starting of a footer-->
      <section class="address col-lg-3 col-md-12 col-sm-12">
        <h3>Branch Office</h3>
        <span class="Name">SambaSiva Rao Muvva</span><br>
        <span class="qual">B.com., A.C.A</span>
        <p>23-5-93, Besides Bank of India<br> Naidupet 1st lane<br> Koritepadu, Guntur-7</p>
      </section>
      <section class="Main-address col-lg-3 col-md-12 col-sm-12">
        <h3>Head Office</h3>
        <span class="Name">Konduru Anil Kumar</span><br>
        <span class="qual">B.com., A.C.A</span>
        <p>No 4, 2nd floor<br> Rangarajulu Street, Ayyavoo colony<br> Aminjikarai, Chennai-29</p>
      </section>
      <Section class="contact-info col-lg-3 col-md-12 col-sm-12">
        <h3>Contact Information</h3>
        <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
        <span class="Email-ID">Email :</span><span class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffcfeecf2fefdfeb1feececf0ecfcf6feebfaecdff8f2fef6f3b1fcf0f2">[email protected]</a></span>
      </Section>
    </div>
  </div>
  <p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>

Answer №2

1) It is advisable to refrain from using custom layout CSS in addition to Bootstrap as it can undermine the responsiveness of the library.

For instance:

position:absolute;
float:left; 
width:30%;

2) Ensure that you adhere to the guidelines outlined on the Bootstrap page for the correct implementation of components. One key aspect to note is the inclusion of a "row" block.
link -> Grid system Bootstrap

The solution for the aforementioned issue can be accessed through the following link: https://codepen.io/YasirKamdar/pen/ypbXVg

HTML

<footer>  
  <!-- beginning of footer-->
  <div class="row">
      <section class="address col-lg-4 col-md-12 col-sm-12">
        <h3>Branch Office</h3>
       <span class="Name">SambaSiva Rao Muvva</span><br>
       <span class="qual">B.com., A.C.A</span>
       <p>23-5-93, Besides Bank of India<br>
     Naidupet 1st lane<br>
  Koritepadu, Guntur-7</p>
</section>
<section class="Main-address col-lg-4 col-md-12 col-sm-12">
  <h3>Head Office</h3>
  <span class="Name">Konduru Anil Kumar</span><br>
  <span class="qual">B.com., A.C.A</span>
  <p>No 4, 2nd floor<br>
  Rangarajulu Street, Ayyavoo colony<br>
  Aminjikarai, Chennai-29</p>
</section>
<Section class="contact-info col-lg-4 col-md-12 col-sm-12">
  <h3>Contact Information</h3>
  <span class="ph">Ph.No:</span><span class="numbers"> xxx-xxxxxxx<br>+91 9985985473<br>+91 8125173473</span><br>
  <span class="Email-ID">Email :</span><span class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1e1c0e101c1f1c531c0e0e120e1e141c09180e3d1a101c1411531e1210">[email protected]</a></span>
</Section>
  </div>
<p class="text-center copyright">Copyright @ 2017 indusfilings.com</p>
</footer>

CSS

footer{
  margin-left:0;
  margin-right:0;
  background-color:#305C7A;
  bottom:0px;
  width:100%;
  height:auto;
}
  footer h3{
    color:white;
    text-decoration:underline;
    text-decoration-color:white;
}
.address, .Main-address, .contact-info  {
  padding-left: 35px;  
}
  footer p{
    color:white;
    width:100%;
    align-content:center;
    align-items: center;
    justify-content: center;  
}
  footer span{
    color:white;
}
.copyright{
    bottom:0px;
    width:100%;
    height:35px;
    background-color:#111B22; 
    align-items:center;
    margin-bottom: 0%;
}

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

Tips for showcasing an image prior to uploading within a personalized design input file

I am facing an issue with displaying multiple images inside custom style input file labels before uploading them to the database. Currently, the script I am using only displays one image at a time and in random positions. My goal is to have each image ap ...

javascriptjqueryhtmlcss

I am struggling to make my table adapt to different screen sizes and become

Here is an example of a table: <TABLE class=vysledky > <TR class=podtrzeni> <TD width="39" height="19">Order <br /> League</TD> <TD width="39" height="19">Order <br /> Team</TD> <TD width="3 ...

htmlcssresponsive-designhtml-table

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

Can you assist me with this issue? I need to modify the code below so that the border color remains blue while a user selects an item from the UL LI list. Here is an image showing the current problem: https://i.sstatic.net/DS7hO.png And here is a pictu ...

htmlcssdom

Flyer - Chart "dimmed" and unselectable when dimensions are specified as a proportion

I am currently working on displaying a map within a container. I have successfully been able to display the map by setting its size to a specified number of pixels. However, my goal is to have the height of the map adapt to the size of the container dynami ...

htmlcssleaflet

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...

html

A hobby project involving the creation of a webmail app using a combination of PHP

As a beginner in web development, I am eager to tackle a hobby project that will help me learn more about PHP and other web-related technologies. I have been considering creating a simple webmail client, but I'm not sure where to begin. I anticipate ...

phphtmlimap

Creating CSS styles to ensure text takes up the largest size possible without wrapping or extending beyond the screen borders

Looking for a way to display text at its maximum size without any wrapping or overflowing the screen? I attempted using @media and adjusting font-size, but things got too complex. My goal is to have the text on example.com displayed at the largest possible ...

htmlcssmaxfont-size

Update the datalist in the view once the user has completed typing in the textbox using Angular 7

Struggling to automatically refresh a datalist in the view once the user finishes typing in the textbox and updates the results. I've experimented with angular directives, Observable, timeouts, and debounces without success. It seems like I've ex ...

htmlangulartypescriptwebdom

Validating Date and Time in Angular 6 using ngIf within an HTML template

I am currently utilizing Angular6. Displayed below is the ngfor with a div. The API provides the meeting date and time along with the status, which is usually listed as upcoming. For example, if the date is 09/18/2018 and the time is 5.30 PM. <div cl ...

htmltypescriptangular6

Is there a way to create a transparent background for my website without affecting the visibility of the content such as images and text?

I'm currently working on a website for a school project, and I've run into a minor issue. I can't seem to make the background of the body transparent without affecting the content within it. Below is my HTML code: <html> <head> ...

htmlcssbackgroundopacitytransparent

Adding ng-messages to a new input element that is generated dynamically in an AngularJS application using Material Design can be

I'm having an issue with my code. Everything is working fine except for the ng-messages part - they are not displaying as expected. I believe that ng-messages should be attached to the 'name' element, but it's not working in this case. ...

javascripthtmlangularjsangularjs-material

Tips for Formatting Mandatory Message Input Fields and Text Boxes

I am in the process of creating a contact page for my Reactjs website, but I am unsure how to style the required message that should appear below the input or textarea upon clicking Submit. Can anyone guide me on how to achieve this? Relevant Code <for ...

htmlcssreactjscontact-formrequired-field

Transforming the text to a new line

I have been attempting to format lengthy texts from a JSON file, but I haven't been successful. The text keeps displaying as multiple sections within a single response, which can be seen in the image below. I've tested solutions like word-break a ...

javascriptcssjson

Can HTML Elements be used within a Contenteditable section?

I am facing an issue with a contenteditable tag on my website. Users are unable to type code into the tag and have it display as an actual element instead of just text. Is there a way for users to input full, working HTML elements in a contenteditable box ...

javascripthtml

Several Divs Positioned on Different Pages with Backgrounds That "Scroll"

Currently utilizing: jQuery Mobile 1.4.5 I am interested in knowing if it is feasible to achieve the following, and if so, how to start working on it. At the moment, there are 4 page divs that utilize swipe for navigation between them with a horizontal t ...

jquerycssjquery-mobile

Tips for centering content vertically in a column using Bootstrap 4

Working on a Bootstrap 4 grid layout, my goal is to vertically align content within a column while maintaining its full height. Here is my current layout for reference: https://i.sstatic.net/6RWx3.png I am aiming for the content alignment to look like th ...

htmlcssbootstrap-4

Send the selected dropdown value to two separate PHP pages without using JavaScript

I am specifically looking for PHP programming, not JavaScript. My requirement is to have a dropdown menu containing 15 weeks. When a user selects a week from the dropdown, they should be redirected to a page that displays a message saying: Welcome! You h ...

phphtml

Selecting a value in Angular using the change method

Currently, I have a select component along with a function in place to retrieve the value selected from the dropdown. The issue lies in the fact that the value returned is undefined. It was functioning properly when I was utilizing Angular Material, but t ...

angularselectbootstrap-4

Collapse all Angular Sidemenu subitems at once

I have a Sidemenu with items and subitems. Currently, the subitems open by default but when I close one, it closes all the items together. I want to modify it so that only that specific item closes. The reopening functionality is working fine but I need th ...

angulartypescriptbootstrap-4

Occasionally, altering the visibility of an element right before submitting a form in Safari may not be effective

Below is the HTML element I'm using to show a loading spinner in my app, with mostly Bootstrap classes: <div id="loadSpinner" class="overlay d-flex justify-content-center invisible"> ... </div> Here is the form on vi ...

javascriptruby-on-railsbootstrap-4safari