SVG logo in Navbar is cut off

The SVG logo in my Navbar is cut off a bit on the right. It doesn’t show as being cut off in the Designer or Preview, only when viewed on a device.


Here is my site Read-Only: **[LINK]

Preview

It looks to me like your SVG isn’t rendering properly in your browser. On my computer the logo has a serif font and in your screenshot shows it as having just a basic sans-serif, which can often happen if an SVG isn’t rendering correctly. You may want to re-export that SVG if you can.

As for it getting cut off, you could try setting the ‘brand_block-logo’ image flex child sizing to ‘don’t shrink or grow’ and see if that helps. It’s not getting cut off on my end though. For reference, I am using chrome on a pc.

edit: I just checked your staging link on my android (mobile chrome browser) and am seeing the same issue as you now (incorrect svg render and it’s getting cut off). I’d start with re-exporting your svg and then try setting a specific width on your image or parent link + the flex child settings I suggested above and see if that helps.

1 Like

@sebrame did you fix it? I can’t see the logo being cut off on mac desktop and safari iOS. All is correct to me.

That was it! I hadn’t exported with the font as outlines! Thanks!