The image in the footer seems to have a mind of its own, refusing to stay put and instead choosing to wander

Is it possible to add a small icon at the bottom of the footer that scrolls up or down as I scroll, instead of remaining fixed?

I'm unsure if the issue lies in setting the image as sticky on scroll or if it's a CSS error.

I attempted to set the image as fixed in the CSS section but all it did was move the image to the left while still allowing it to scroll up and down.

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
}

.page-footer {
  background: #e85259;
}

.blurb p {
  color: #faf9f9;
  font-weight: 100;
} 

/* Other styles omitted for brevity */
htmlcss

Answer №1

Using "Position: fixed;" will cause the image to remain in a static position on the screen. To ensure that the image is positioned relative to its parent element, you should use <code>position: absolute;
. In this scenario, it would likely be within the footer container.

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
}

.page-footer {
  background: #e85259;
}

.blurb p {
  color: #faf9f9;
  font-weight: 100;
}

.blurb a {
  color: #faf9f9;
  font-weight: 100;
}

.container-footer {
  margin: auto;
  width: 100%;
  text-align: center;
}

#footer-images ul {
  padding: 0;
}

#footer-images li {
  list-style: none;
  margin: 0 10px;
  display: block;
}

#footer-images ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
<!-- Start - Footer -->
<!-- Footer -->
<!-- Footer -->
<footer class="page-footer font-small">

  <!-- Footer Links -->
  <div class="container">

    <!-- Grid row-->
    <div class="row text-center d-flex justify-content-center pt-5 mb-3">

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">About Us</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Products</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Locations</a>
        </h6>
      </div>
      <!-- Grid column -->


      <!-- Grid column -->
      <div class="col-md-3 blurb  mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Contact</a>
        </h6>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row-->

    <hr class="rgba-white-light" style="margin: 0 15%;">

    <div class="container-footer">
      <div id="footer">
        <div id="footer-images">
          <ul>
            <img class="img-responsive" width="89px" height="73px" img src="https://imgur.com/UwZrFN9">
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-8  blurd col-12 mt-5">

    </div>

    <!-- Grid row-->
    <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">
      <!-- Grid column -->
      <div class="col-md-8  blurb col-12 mt-5">
        <p>+(503) 2243-4887</p>
        <p style="line-height: 1.7rem">Adriatic Street and Amazon River Avenue No. 1 Gardens of Guadaluppe, Old Cuscatlan, El Salvador.</p>
        <p>© Garden of Bread all rights reserved</p>
      </div>`enter code here`
      <!-- Grid column -->

    </div>
    <!-- Grid row-->
    <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">

    <!-- Grid row-->
    <div class="row pb-3">

      <!-- Grid column -->

</footer>
<!-- End - Footer -->

Answer №2

To make your footer image fixed, remember to include the !important command after your fixed property in the CSS code. For example: position: fixed!important; This should help resolve any issues you are experiencing.

    #footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100px;
    }
    
    .page-footer {
      background: #e85259;
    }
    
    .blurb p {
      color: #faf9f9;
      font-weight: 100;
    }
    
    .blurb a {
      color: #faf9f9;
      font-weight: 100;
    }
    
    .container-footer {
      margin: auto;
      width: 100%;
      text-align: center;
    }
    
    #footer-images ul {
      padding: 0;
    }
    
    #footer-images li {
      list-style: none;
      margin: 0 10px;
      display: block;
    }
    
    #footer-images ul {
      display: flex;
      justify-content: center;
      align-items: center;
    }

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

Retrieve information from a SQL database table and present the output in an HTML table format

I am trying to display the result of a query to a remote ODBC SQL database in an HTML table using PHP. I have successfully established the connection with the database, but when I attempt to execute a query and display it in a table, nothing appears. I am ...

phphtmlmysqlodbc

Tips for Resizing google reCAPTCHA

The problem's image is shown below: https://i.sstatic.net/ph2EX.jpg Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> ...

htmlcssasp.netrecaptcha

Choose Your Price - Price Grids

I need to incorporate two sets of pricing columns into a website. The first set is for regular car cleaning prices, while the second set is for larger cars with slightly higher prices. My idea is to have two buttons at the top – one for regular cars and ...

javascripthtml

Loop through multiple levels of elements using jQuery

I have a snippet of HTML that resembles the following structure: <div class="block"> <div id="item1"></div> <div id="item2"></div> </div> <div class="block"> <div id="item3"></div> </di ...

jqueryhtmlloopsforeach

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height

Adjust the size of the container DIV based on the content within the child DIV

I have been searching for a solution to my question without success. Here is the issue: I have a DIV that acts as a container for a Post in my project. Inside this post are classes for the poster avatar, name, timestamp, text, and more. The problem arise ...

htmlcsssize

"Trouble with jQuery: Selecting an image to change isn't

Can someone help me figure out why my simple image change on a dropdown isn't working correctly? You can find the code on this Jsfiddle. Thank you for any assistance! $("#display_avatar").change(function(){ $("img[name=preview]").attr("src", $( ...

jqueryhtmlcss

This code appears to be invalid based on W3C standards - unsure on the solution to correct the errors

My website is quite large, but unfortunately it contains 31 errors. I am unsure of how to go about fixing them. I would greatly appreciate any assistance in resolving these errors, especially the ones that seem to appear for unknown reasons: http://valid ...

htmlcssw3c

Show a modal with Jquery

Upon page load, I want to display a popup message. The popup is appearing correctly, but the close button in the bar is too big and doesn't fit properly. How can I adjust the size of the bar to accommodate the button? <script src="https://code.j ...

jqueryhtmlcss

When you scroll a fixed element on the page, the block is truncated

I made a modification for adding cart items and included a script for managing my cart The cart is supposed to stick to the right edge and scroll up and down on the page Everything seems to work, but there's a slight issue when I click on Add 1 and ...

javascripthtmljquerycss

incorrect text alignment issue on mobile devices, potentially limited to iOS as Android has not been tested

I am experiencing an issue with the alignment of two forms on my webpage when viewed on iOS devices such as iPhone and iPad Safari. Strangely, the forms display correctly on computers (Windows and even Mac with Safari), but on mobile devices the inputs are ...

htmlcssios

Utilizing ng-href in Angular.js Template: A Guide

I am attempting to develop a simple Single Page Application (SPA) with just one index.html file that includes templates. However, I encountered an issue with the ng-href directive: <a ng-href="#/myPage">myPage</a> This works fine in index.h ...

javascripthtmlangularjstemplates

Display the outline of a translucent image

Looking to create an image reveal effect on my website. I want to display only the outline of a transparent image using brightness, then gradually reveal the full image by removing the brightness effect. Currently, I achieve this with a black outline usi ...

javascripthtmlcssreactjs

What is the significance of a colon appearing at the start of HTML attribute names in a Vue template?

<circle r="3" :cx="airport.x" :cy="airport.y" class="airport__marker" /> Are the attributes v-bind:cx and v-bind:cy equivalent to what is shown above? ...

htmlvue.jssyntax

The order of CSS precedence shifts even when the class sequence is the same

In my development setup, I have a react component that is embedded within two distinct applications each with their own webpack configurations. Within the component, I am utilizing a FontAwesome icon using the react-fontawesome library: <FontAwesom ...

javascriptcssreactjswebpackfont-awesome

Puzzling blank area found beneath the form component

There seems to be some extra space at the bottom of a form when it's placed inside a div. How can we remove that unwanted space? In examples from stack overflow, the extra space is not visible in the code snippets provided. However, it appears elsewh ...

htmlcssformsspacing

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

htmlcss

What methods are available for managing model fields within a for loop in Django?

As a newcomer to Django, I am embarking on the journey of creating a Quiz web application that presents one question at a time. Upon selecting an answer using radio buttons, the application should promptly display whether the response is correct or incorre ...

javascripthtmldjangofor-loopdjango-quiz

What could be preventing the jQuery from showing the JSON response?

I am having an issue with a jQuery script that is supposed to pull a quote from an API in JSON format and display it on the page. However, for some reason, I am unable to retrieve data from the API. Can you help me figure out what is wrong here? Thank yo ...

jqueryhtmljsonapi

Dynamically switch between showing more and showing less content on each div

Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...

javascriptcssreactjsbootstrap-4material-ui