Place image on bottom of page footer

Hi

I would like to place a puffin, either standing with his foot on top of the hr line dividing the footer underneath,

or standing at the very bottom of the page, in the footer section, with some margin space on the left.

It is hovering in the air on top of the line at the moment https://www.quodvultdeus.com/

Any ideas?

This topic is closed to new replies. Start a new post to keep the conversation going.

osgood_Correct answer

Legend

still not working

Your best option is to rework your code:

Instead of:

<div class="row col-md-3">
<div id="puffin"><img src="/Img/puffin@2x.png" alt="" width="120" class="img-fluid"/>
</div>
</div>
<hr class="my-4">

Replace with:

<div class="container-fluid border-bottom mb-3">
<img class="ml-4" src="/Img/puffin@2x.png alt="" width="120">
</div>

Community Expert

In other words, change

#puffin {
    margin-left: 50px;
    bottom: 0px;
}

to

#puffin {
    margin-left: 50px;
    margin-bottom: -15px;
}

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Inspiring

unfortunately that didn't work?

Translate

Community Expert

Try

#puffin {
    margin-left: 50px;
    margin-bottom: -15px !important;
}

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up