Mobile logo – Responsive size

  • Resolved Aarvarkc

    (@aarvarkc)


    2 years, 4 months ago

    Hello!

    I tried to make the logo for mobiles smaller by using this code:

    @media only screen and (min-width: 200px) and (max-width: 670px) {
    div.logo-box > img {
    display: block;
    width: 40%!important;
    height: auto;
    }
    }

    But the logo doesn’t became smaller. I made the width even 10% to be sure, but no.
    Maybe is something obvious and i can’t see it.

    Any help would be appreciated!
    Thanks!

    ?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Alexandru Tapuleasa

    (@talextech)

    Please post a link to your website so we can have a look ??

    Thread Starter Aarvarkc

    (@aarvarkc)

    Hi Alexandru,

    Thanks for the response! ??
    Unfortunately the website is in development locally, so i can’t give a link right now.

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    Hi,

    Sorry, but I missed it the first time I checked your code. It doesn’t work because we escape CSS code and the > selector gets encoded as HTML. You can skip it though as there is only one image in that element. This code should work:

    @media only screen and (min-width: 200px) and (max-width: 670px)
div.logo-box img {
    display: block;
    width: 40%!important;
    margin: 0 auto;
    height: auto;
}
    Thread Starter Aarvarkc

    (@aarvarkc)

    Hi Alexandru,
    Thanks for the solution.
    It works by removing the selector >.
    Have a nice day!

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    Great! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile logo – Responsive size’ is closed to new replies.