News:

AbanteCart v1.4.2 is released.

Main Menu

Do you like AbanteCart? Please rate AbanteCart or share your experience with other eCommerce entrepreneurs. Go to Softaculous rating page to add your rating or write a review

how to make logo auto resize

Started by sultanali, December 26, 2017, 01:50:47 PM

Previous topic - Next topic

sultanali

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!

abolabo

You can set your own logo width for each screen resolution inside your style.css file.
See @media sections. Put css rule for each.
"No one is useless in this world who lightens the burdens of another."
― Charles Dickens

sultanali

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.

abolabo

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
"No one is useless in this world who lightens the burdens of another."
― Charles Dickens

sultanali

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

SkyMediaSingapo


Sam_78

Quote from: 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

Here is solution http://forum.abantecart.com/index.php/topic,5087.0.html for sticky header see if it works

Polo_mac

Was Facing the same problem. But it is solved now

edubirdie


Forum Rules Code of conduct
AbanteCart.com 2010 -