Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

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

Offline kiwi

  • Newbie
  • *
  • Posts: 38
  • Karma: +3/-0
    • View Profile
    • Kiwi Custom Stamps Ltd
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.



"The more you know, The more you know you don't know"

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • 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.

Offline kiwi

  • Newbie
  • *
  • Posts: 38
  • Karma: +3/-0
    • View Profile
    • Kiwi Custom Stamps Ltd
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

"The more you know, The more you know you don't know"

Offline kiwi

  • Newbie
  • *
  • Posts: 38
  • Karma: +3/-0
    • View Profile
    • Kiwi Custom Stamps Ltd
Re: Help with Responsive SVG Logo size @media queries
« Reply #3 on: March 26, 2019, 01:50:33 AM »
 ;D
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;
"The more you know, The more you know you don't know"

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5774
  • Karma: +274/-2
    • View Profile
Re: Help with Responsive SVG Logo size @media queries
« Reply #4 on: March 26, 2019, 02:02:41 AM »
Thank you, kiwi

 

Powered by SMFPacks Social Login Mod