AbanteCart Community

eCommerce construction => General Discussion => Topic started by: sultanali on December 26, 2017, 01:50:47 PM

Title: how to make logo auto resize
Post by: sultanali on December 26, 2017, 01:50:47 PM
hello admin,

Is it possible in AC, logo resizable according to the screen resolution ?  can i get mobile responsive logo ?

if i can please guide me how to do that. (i'm sure many ppl wanted that)

Thanks in advance!
Title: Re: how to make logo auto resize
Post by: abolabo on December 26, 2017, 02:06:31 PM
You can set your own logo width for each screen resolution inside your style.css file.
See @media sections. Put css rule for each.
Title: Re: how to make logo auto resize
Post by: sultanali on December 27, 2017, 02:48:37 AM
hello abolabo

i try to put css rule but nothing works,
@media only screen and (max-width: 320px) {
    .logo {
           height: auto;
           margin: 0;
           max-width: 20px;
           padding: 0px;
    }
}

also this one.

@media only screen and (max-width: 320px) {
    .logo {
           background-size:contain!important;           
           height: auto !important;
           margin: 0;
          max-width: 417px;
          padding: 11% 0;
    }
}

please guide me where i'm going wrong.. i have attach the screen shot

Thanks for your help.
Title: Re: how to make logo auto resize
Post by: abolabo on December 27, 2017, 06:04:02 AM
you should to use browser developer tool to define which rule has been applied to your logo.
For example in firefox you can do right click on logo and choose Inspect element. It will open html-console and css rules at right column.
Also use responsive mode - > menu Tools -> webDeveloper->responsive design mode
Title: Re: how to make logo auto resize
Post by: sultanali on December 29, 2017, 06:56:38 AM
Thank you, for the help. :)

i have another question, i don't know maybe it is relevant to ask below the above question or not,
My Question is, can we make "Sticky" top bar (the blue bar that has logo and other links), when we scroll down, it will move along the scroller ?
just like the link i have shared Please help me, how i can do that ?
because i try to make the header div " position fixed " then whole page messed up.

stackoverflow Dot com
Title: Re: how to make logo auto resize
Post by: SkyMediaSingapo on February 17, 2019, 11:56:56 PM
Thanks  for share your knowledge
Title: Re: how to make logo auto resize
Post by: Sam_78 on February 20, 2019, 11:20:51 AM
Thank you, for the help. :)

i have another question, i don't know maybe it is relevant to ask below the above question or not,
My Question is, can we make "Sticky" top bar (the blue bar that has logo and other links), when we scroll down, it will move along the scroller ?
just like the link i have shared Please help me, how i can do that ?
because i try to make the header div " position fixed " then whole page messed up.

stackoverflow Dot com

Here is solution http://forum.abantecart.com/index.php/topic,5087.0.html for sticky header see if it works
Title: Re: how to make logo auto resize
Post by: Polo_mac on February 26, 2019, 06:49:11 AM
Was Facing the same problem. But it is solved now
Title: Re: how to make logo auto resize
Post by: edubirdie on March 07, 2019, 03:59:46 AM
Nice post