search

hugo-fixit / FixIt

🔧 A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题
https://fixit.lruihao.cn
MIT License
769 stars 106 forks source link

Image Link Rendering Issue w/ DuckDuckGo & Firefox #526

Closed unnsse closed 1 week ago

unnsse commented 1 week ago

Am loving using Hugo and the FixIt theme for my website (https://unnsse.io) - thank you so much for creating and maintaining this very lovely and useful theme!

Started using Clicky for website analytics, by pasting in the tracking code on the same line as Powered by, but right after the FixIt logo separated with a -?layouts/partials/footer.html:

https://github.com/unnsse/unnsse.io/blob/81a44f654ab553e9c681953dc5326cc42fa3be32/layouts/partials/footer.html#L25-L26:

- <a title="Google Analytics Alternative" href="https://clicky.com/101467984"><img alt="Clicky" src="//static.getclicky.com/media/links/badge.gif" border="0" /></a><script async data-id="101467984" src="//static.getclicky.com/js"></script>

Renders correctly via Safari & Chrome, but the image is bigger and appears misaligned:

Safari: footer_safari

Chrome:

footer_chrome

The other issue is that withFirefox & DuckDuckGo, the image doesn't render (not orange text or box surrounding the text) correctly:

Firefox:

footer_firefox

DuckDuckGo:

footer_duck

Question(s):

  1. Why is it not rendering in DuckDuckGo and Firefox but is rendering correctly (with the exception of image size alignment) on Safari & Chrome?
  2. Is there a way to create a custom <div> tag to auto-render this so it doesn't look misaligned and looks like the same size (on all browsers, including mobile)?

Note: Wasn't able to edit the title of this thread so apologize if the title is incorrect (referring to localhost instead of specific browsers).

Originally posted by @unnsse in https://github.com/hugo-fixit/FixIt/discussions/525

Lruihao commented 1 week ago

Sorry！I think this is a customized requirement, so it's not very suitable to be built into the theme. For your questions, it seems to be just a CSS issue, and you need to modify the style in _custom.scss until you are satisfied.