Author Topic: how to make logo auto resize  (Read 1082 times)

Offline sultanali

  • Newbie
  • *
  • Posts: 6
  • Karma: +1/-1
    • View Profile
how to make logo auto resize
« 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!

Offline abolabo

  • core-developer
  • Administrator
  • Hero Member
  • *****
  • Posts: 1747
  • Karma: +238/-10
  • web for all, all for web!
    • View Profile
    • AbanteCart
Re: how to make logo auto resize
« Reply #1 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.
“No one is useless in this world who lightens the burdens of another.”
― Charles Dickens

Offline sultanali

  • Newbie
  • *
  • Posts: 6
  • Karma: +1/-1
    • View Profile
Re: how to make logo auto resize
« Reply #2 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.

Offline abolabo

  • core-developer
  • Administrator
  • Hero Member
  • *****
  • Posts: 1747
  • Karma: +238/-10
  • web for all, all for web!
    • View Profile
    • AbanteCart
Re: how to make logo auto resize
« Reply #3 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
“No one is useless in this world who lightens the burdens of another.”
― Charles Dickens

Offline sultanali

  • Newbie
  • *
  • Posts: 6
  • Karma: +1/-1
    • View Profile
Re: how to make logo auto resize
« Reply #4 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