Help with Responsive SVG Logo size @media queries

[kiwi]

Hi Everyone,
Im having issues with my Svg Logo not displaying correct size on desktop from 767px upwards.

i loaded the XML or SVG code directly into the html Resource Library. it displays correctly on desktop except for this ]> is showing too. and it does not resize for smaller devices.

so i removed this ]> from the code and changed the Width and Height both to 100%. Now it is responsive for small devices (Max Width 767px) but the image on anything larger than 767px (Min Width 767px) reverts to a small image 300 x 20.??

if i delete both the width and height from the svg code, image only shows on devices max width 767px?



can anyone help?



should i amend the SVG code or Veiwport or the @media code or what?
the original image size is 10838 x 788px but it shouldnt matter what size the image is.

[Basara]

Hello.
Check this https://www.w3schools.com/css/css_rwd_mediaqueries.asp
also you can try width:100% if logo container is responsive.

[kiwi]

 
Thank you,
seems to have fixed the issue.
i changed all the .header-logo widths to 100% instead of auto.

added this

.header-logo {
      background: none;
      width: 100%;
      height: auto;   
      line-height: normal;
      text-align: left;

to a couple of @ media queries here /public_html/storefront/view/default/stylesheet/style.css
as there are about 15 @media queries within the style.css
looks like it is now responsive to all devices.
, now to sort the Nav bar on mobile out, as it is a mess!
Cheers
Sam

[kiwi]

 
had to re-do this after the latest update in style.css

paste the below instead of whats in there and it fixed it again.

.header-logo {
      background: none;
      width: 100%;
      height: auto;   
      line-height: normal;
      text-align: left;

[Basara]

Thank you, kiwi