Custom footer/copyright

[frederic-loui]

Hi ! I'm creating a document web site and i'm customizing the copyright right now. I'd tried to tweak and follow some discussions (find by googling the issue) and docs but could not find a "elegant" answer to the problem. Do you know how to properly set image on the right ? For now this is what I have by using overrides/partials/copyright.html:

[squidfunk]

Without knowing your exact HTML and CSS, it's hard to give exact directions, bug something like this should work

<div style="display: flex; justify-content: space-between; align-items: center">
  <div>Aligned to left</div>
  <div>Aligned to right</div>
</div>

Warning: This example uses inline styles for clarity, but it's better to move this into CSS classes.

[frederic-loui]

Thanks for your answer and again sorry for the question. You might have noticed that I'm not a web developer.
Please find the code in docs/overrides/partials/copyright.html

<div class="md-copyright">
<div style="display: flex; justify-content: space-between; align-items: center">
  <div>Aligned to left</div>
  <div>Aligned to right</div>
</div>
    {% if config.copyright %}
    <div class="md-copyright__highlight">
        {{ config.copyright }}
    </div>
    {% endif %}
    {% if not config.extra.generator == false %}
    Made with
    <span class="twemoji heart">
        {% include ".icons/octicons/heart-fill-24.svg" %}
    </span> by
    <a href="https://github.com/orgs/rare-freertr/people" target="_blank" rel="noopener">
        RARE contributors</a> and <a href="https://squidfunk.github.io/mkdocs-material/">Material for MkDocs</a>
    {% endif %}
</div>

I just copy-paste the code you provided me in order to identify the right boundaries.
Resulting image is here below:

Basically I wanted to be able to put the text or the image on the right end side of the rectangle(right end of the page footer)

Maybe I should override partials/footer.html then ?

Anyhow, thanks for this awesome piece of code. I can also accomodate to have everything on the LEFT as a work around.

Best/Frederic

[frederic-loui]

Hourra ! I overidden footer.html and that did the trick !
Thanks for your super help @squidfunk.

Again, many thanks again for this awesome piece of work !

[squidfunk]

Glad I could help!