make a responsive image

Hello,

my website is called: www.myschoolpad.de

In the header, right side, there is a mascot. On the normal computer the mascot looks good. But
on mobile phones the mascot does not look good. Is there a possibility, to make the figure responsive?

Best regards

Jessi

Yous mascot is used as CSS element background and it is in the same block with logo, so it will always be under the logo no matter how you move or push it.

You might try to resize logo for mobile devices but it is likely that it will become unreadable.

Personally I would just replace social icons with mascot, make that area visible for mobile devices and would add proper floats. However, it might still look messed up because header area would take up way more space on a tiny mobile screen.

Just experiment around, but you won’t be able to do anything about CSS background, that’s for sure.