Best Webflow practice for a responsively sizing logo

[ecarter]

My almost-done first site attempt, using the ‘Incredible’ template.

https://preview.webflow.com/preview/bkmtest1?preview=571aa7b8da56cf5c7704b753ffa2abd0

The problem is probably pertinent to any browser, since in the preview I can see the problem. Which is - I uploaded my cat head SVG logo, but it wasn’t playing nicely, so I sort of jacked with the padding of the container the logo is in. I am pretty sure this was not the best way to try and do this (plus, resizing the window doesn’t let the logo stay proportionally centered exactly where I want it).

So - using Webflow - what would be the best method → specifically, with some hand holding please, my coding skills are meager ← that you guys would recommend in terms of uploading a logo file that resizes a little better across changes in browser size, per media type? I know that once you resize a big browser window on say, a giant LCD, past a certain smallest size, it’s going to switch to the smaller media types, but I understand that part.

Thanks!

E

[vincent (Vincent Bidaux)]

Is it better now, do you still need advices?

[cyberdave (Dave S.)]

Hi @ecarter, I think you are on the right track with the percentage based width and height, however one thing I would recommend is to not use negative margins in the style for that logo class.

Using negative margins can have unpredictable results across different browsers. Everything might be ok with it, but there is a greater chance of something not looking as you expect on mobile browsers. I hope this helps.

Cheers,
Dave