emoji is displaying not in original size in # Site Author section

[kyxap]

• This is a question about using the theme.
• This is a feature request or enhancement.
• I believe this to be a bug with the theme.
  • I am using the latest version of the theme.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 4.10.0
• Jekyll version: n/a
• GitHub Pages hosted: yes
• Operating system: n/a

---

Expected behavior

Want to use original img size of emoji in # Site Author section.

Img resized. Please check screenshot:

Html:

<p class="author__bio" itemprop="description">
        QA Automation Engineer, Originally from Kyiv, Ukraine <img class="emoji" title=":ukraine:" alt=":ukraine:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f1fa-1f1e6.png" height="20" width="20">
      </p>

Steps to reproduce the behavior

Add emoji to Site Author column like (by editing the _config.yml):

# Site Author
author:
  name             : "Roman Kukharuk"
  avatar           : "/assets/images/bio-photo.jpg"
  bio              : "QA Automation Engineer, Originally from Kyiv, Ukraine :ukraine:"

[mmistakes]

You'll likely need to add some CSS to style the width of these elements. Use your browser's web development tools to inspect them and see if they have a common class name you can apply styling to.

Without seeing the actual markup I have no clue what a potential fix would be. If I had to guess those images have width: 100% which is scaling them up to fill their parent.

[kyxap]

@mmistakes html added. seems like height="20" width="20" ignored.

[mmistakes]

HTML attributes aren't going to fix it as this line is stretching it:

.sidebar img {
    width: 100%;
}

Either add inline CSS to your emoji img elements

<img src="whatever.png" style="width: 20px; height: 20px;">

Or use the .emoji class and add to the global stylesheet.

.sidebar img.emoji {
    width: 20px;
    height: 20px;
}

[kyxap]

Fixed with adding this into _sidebar.scss > .sidebar :

  img.emoji {
     width: 20px;
     height: 20px;
  }

Not sure why there 100% width for all images on side bar, maybe it can be deleted?
Bc without this emoji will work out of the box.

[mmistakes]

It's there to scale sidebar images like in this test post.

If more people have a use for .emoji in the sidebar then I'd happily accept a PR adding the styles above. Though doesn't seem like that's the case as this is the first I've heard of the issue.