Struggling to align the footer of your webpage and ensure it adjusts proportionally with the window size?

After trying several codes that have worked before, I ran into a problem when attempting to place two div side by side for the footer. No matter what code I tried, I couldn't get it centered and responsive to the user window ratio. Even after consulting with others and testing their codes, I still couldn't fix the issue.

The main issue lies in my inability to center the contents within the Footer while ensuring they adjust according to the user's window size.

/* Footer */

#sides{
    /*margin-left:750px;*/
}
#left{
    float:left;
    text-align: left;
    overflow:hidden;
}

.footer {
    background-color: black;
    padding: 30px;
    text-align: center;
    color: #99ffdd;
}


.footer-distributed{
    background-color: #2c292f;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 50px 50px 60px 50px;
    margin: 0 auto;;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center{
    display: inline-block;
    vertical-align: top;
}

/* Footer left */
.footer-distributed .footer-left{
    width: 14%;
}

/* Footer Center */
.footer-distributed .footer-center p{
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin:0;
}

.footer-distributed .footer-center p a{
    color:  #e0ac1c;
    text-decoration: none;;
}

@media (max-width: 880px) {

    .footer-distributed .footer-left,
    .footer-distributed .footer-center{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    .footer-distributed .footer-center i{
        margin-left: 0;
    }

}
<footer class="footer-distributed">
    <div class="footer-left">
        <img style="width: 100px; height: 100px" src="http://localhost/Window_Cleaner/pictures/paypal/paypal_support.png">
    </div>
    <div class="footer-center">
        <a class="contactme" href="http://localhost/Window_Cleaner/menu/contact.html">
            <h2>Contact me</h2>
        </a>
        <div>
            <i class="fa fa-phone"></i>
            <p>+99 99999 999999</p>
        </div>
        <div>
            <i class="fa fa-envelope"></i>
            <p><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4819c8589948881a48c8b90908d88ca878b89">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b1acb5b9a4b8b194bcbba0b9b5bdb8fab7bbb9">[email protected]</a></a></p>
        </div>
    </div>
</footer>

htmlcss

Answer №1

To achieve this effect, you can utilize absolute positioning for the image on the left.

/* Custom Footer Styling */

#sides {
    /*margin-left:750px;*/
}

#left {
    float: left;
    text-align: left;
    overflow: hidden;
}

.footer {
    background-color: black;
    padding: 30px;
    text-align: center;
    color: #99ffdd;
}

.footer-left {
    position: absolute;
    left: 0;
}

.footer-distributed {
    background-color: #2c292f;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    position: relative;
}
<footer class="footer-distributed">
    <div class="footer-left">
        <img style="width: 100px; height: 100px" src="http://localhost/Window_Cleaner/pictures/paypal/paypal_support.png">
    </div>
    <div class="footer-center">
        <a class="contactme" href="http://localhost/Window_Cleaner/menu/contact.html">
            <h2>Contact me</h2>
        </a>
        <div>
            <i class="fa fa-phone"></i>
            <p>+99 99999 999999</p>
        </div>
        <div>
            <i class="fa fa-envelope"></i>
            <p><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e0fde4e8f5e9e0c5edeaf1e8e4ece9abe6eae8">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b3aeb7bba6bab396beb9a2bbb7bfbaf8b5b9bb">[email protected]</a></a></p>
        </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

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

javascripthtmlreactjsmaterial-ui

Optimizing web development: Employing HTML templates to dynamically enhance website performance

My task involves the redesigning of an existing website (foo.com) using .NET and C#. The website caters to multiple companies such as abc.com, def.com, ghi.com, etc. Currently, the website utilizes html templates specific to each company's website in ...

c#asp.nethtmlrefactoring

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor

Saving Information from an HTML Form Input?

I am currently working on a form that collects information about employees including their name, age, position, and details. When the "Add Record" button is pressed, this information should be added to a designated div. Although I have set up the Object C ...

javascripthtmlarraysvariables

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...

htmlcssbackground-colorcss-animations

There are various IDs in the output and I only require one specific ID

I have a JSON fetcher that is functioning properly. However, whenever I request an ID, it returns all the IDs present in the JSON data. Is there a way to retrieve only the latest ID? This is my first time working with JSON so I am still learning. $(docu ...

javascripthtmljsonfetch

Add a container element resembling a div inside a table without implementing the table layout

I am working with a table that is rendered by DataTable, and I have the requirement to dynamically append new elements inside the table like this: The dark grey area represents the new DOM elements that need to be inserted dynamically. The first row cont ...

javascripthtmlcss

What is the best way to position an SVG background image at the bottom of a container?

I am facing an issue with using an SVG as a background-image on a pseudo element. The image is not as tall as the container, so I would like to position it at the bottom of the container while having the background color fill up the top portion to create a ...

csssvg

Tips for transferring information from ng-view to the navbar on the index.html page using AngularJS

Recently, I embarked on a journey to learn the MEAN stack and decided to challenge myself by building an authentication page from scratch instead of using the out-of-the-box solution. My main struggle lies in updating texts on my navbar. Here's a snip ...

javascripthtmlangularjstwitter-bootstrapmean-stack

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

javascriptjquerycsswordpress

Sending numerous HTML forms using a sole submit button through AJAX

On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...

javascripthtmlajaxformspost

Stop capturing mouse and keyboard events within a specific div element on all web browsers

I manage a website with forms that have jquery autosave features and are updated using ajax. These forms include various types of input elements such as textboxes, jQuery UI datepickers, and time pickers... <div id="content"> <form id="line1"&g ...

javascriptjqueryhtml

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

Sketch a variety of numerical values in a circular formation

I was working on a number circle using the below fiddle, but I need it to always start from 0 at the top. How can I achieve this? Additionally, I would like to connect the numbers from the inner circle border to the number with a dotted line. How can I dr ...

javascriptjqueryhtmlcss

Controlling the Flow of Events in JavaScript Documents

Explore the integration of two interconnected Javascript files and delve into managing event propagation between them effectively. 1st js file var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100, 40]; var blue = [196, 77, 55]; var ...

javascriptjqueryhtml

Utilizing Angular controllers to access data attribute values from child elements

Today I embarked on the journey of learning AngularJs through online tutorials. Excited about my new project, I started working on creating some useful features using Angular. Here is a snippet of my progress so far: The HTML Part <div data-ng-control ...

javascripthtmlangularjs

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Implementing the Upload Feature using AngularJS

Currently, I'm facing a challenge in implementing an upload button on my webpage using AngularJS and Bootstrap. Specifically, I am having trouble assigning the (upload) function to that button in AngularJS. The goal is for the button to enable users t ...

javascripthtmlcssangularjs