Objective: Ensure the Ko-Fi Button Widget is aligned correctly without overlapping the privacy policy link, but placed neatly beside it. Once achieved, this alignment can be replicated for all future buttons/links added to the footer bar.
Methods attempted:
- Placing the Ko-Fi Code in its own div.
- Nesting a div with the Ko-Fi Code in the container div
- Placing the Ko-Fi Code in the container div.
Current code snippet:
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - APixelADay - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
<script>
kofiWidgetOverlay.draw('knightshade07', {
'type': 'floating-chat',
'floating-chat.donateButton.text': 'Support me',
'floating-chat.donateButton.background-color': '#00b9fe',
'floating-chat.donateButton.text-color': '#fff'
});
</script>
</div>
</footer>
Current appearance on webpage: https://i.sstatic.net/pKXhX.png
Desired appearance: https://i.sstatic.net/pMsxU.png
UPDATES: Despite attempting CSS adjustments suggested by dale landry, horizontal display of elements has not been successful. The focus remains on achieving horizontal rather than vertical element alignment.
Updated code snippet:
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - APixelADay - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
<p>Test</p>
</div>
</footer>
Updated appearance: https://i.sstatic.net/BIsbF.png
CSS for footer in the CSS folder (Generated by Visual Studio):
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}