Skip to content

Large social media icons like YouTube are cropped with some window sizes #867

@hsandt

Description

@hsandt

I found out that some social media icons were cropped with some window sizes. It's hard to determine the exact criteria but the following factors seem to come into play:

  • whether window is so small that it switches to small device (e.g. smartphone) css
  • whether the page is long enough that the scrollbar appears (which eats a little of content width)
  • the exact window width

An example with the YouTube icon which is provided by the theme (I suppose via FontAwesome):

Image

and an example with a custom .svg, the Ko-fi logo, which I properly formatted to fit in a 16x16 square:

Image

Surprisingly, stretching the window will trigger the bug here and there alternatively, as if the CSS was computing some rounded dimension that was sometimes even or odd, rounded up or down - instead of the bug happening for a certain window range.

2025-03-17.Minima.social.icons.cropped.here.and.there.on.window.resize.webm

I could reformat the svg to fit in a square with more padding (not sure if I can override the native YouTube icon though), but I'm looking for a cleaner fix. Adding padding didn't help. It looks like the cropping is around the svg itself:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions