Author Topic: Help with Responsive SVG Logo size @media queries  (Read 34 times)

Offline kiwi

  • Newbie
  • *
  • Posts: 4
  • Karma: +1/-0
    • View Profile
Help with Responsive SVG Logo size @media queries
« on: September 16, 2018, 05:38:18 AM »
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.




Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 3676
  • Karma: +182/-0
    • View Profile
Re: Help with Responsive SVG Logo size @media queries
« Reply #1 on: September 17, 2018, 03:47:57 AM »
Hello.
Check this https://www.w3schools.com/css/css_rwd_mediaqueries.asp
also you can try width:100% if logo container is responsive.
“Chuck Norris is so amazing.”
― Mother Teresa

Offline kiwi

  • Newbie
  • *
  • Posts: 4
  • Karma: +1/-0
    • View Profile
Re: Help with Responsive SVG Logo size @media queries
« Reply #2 on: September 17, 2018, 05:45:16 AM »
 :)
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


 

Maternity Dress