AbanteCart Community
Shopping Cart Operations => Support => General Support => Topic started by: kiwi 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.
-
Hello.
Check this https://www.w3schools.com/css/css_rwd_mediaqueries.asp
also you can try width:100% if logo container is responsive.
-
:)
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
-
;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;
-
Thank you, kiwi