Before you ask please READ THIS

How to enlarge Logo for mobile

edited March 2015 in Fame Posts: 8
My logo in the mobile version of the site becomes too small.
So I tried to change the min-width but the logo becomes no longer centered.
Can you help me to enlarge the logo for the mobile version of the site?

Thank you very much.

Best regards,

Tancredi

Post edited by TheNorba on

Comments

  • AirAir
    Posts: 10,970
    Yes sure, but show me live link :-) So I have anything to operate on :-)

    With kind regards.
  • edited March 2015 Posts: 8
    I'm working in local with MAMP, this is the screenshot of the logo on mobile if i set:
    #logo img {
    min-width:250px;
    }
    How can I center the logo?

    Help me.

    Thank you.

    Tancredi
    Schermata 2015-03-24 alle 12.19.57.png
    398 x 378 - 121K
    Post edited by Air on
  • AirAir
    Posts: 10,970
    It is strange cause you don't use woocommerce, and you got there padding same like when it is active.

    Too bad I can't see it live, cause then I could see what styles interfere with your logo.

    Try this custom CSS, but it probably wont work in your case:
    @media only screen and (max-width: 680px) {
    .header-centered-logo.with-cart .logo-container,
    .header-centered.with-cart .logo-container{ /* equal padding */
    padding-left: 50px;
    padding-right: 50px;
    }
    }
    If you know how to use firebug then please tell me what classes you see in element <header id="header">.

    With kind rergards.
  • edited March 2015 Posts: 8
    I tried with the custom CSS that you suggest me, but it doesn't work

    This is the class:
    header id="header" class="sticky header-centered-logo bg-cover with-search"

    Please let me know.

    Thank you.

    Tancredi
    Post edited by TheNorba on
  • AirAir
    Posts: 10,970
    So you have proper classes. If you didn't make any other CSS changes then it should be fine without modifications. However there is set by default max-width: 100px; for this size of screen. Please remove your CSS that you have added for logo and use this instead:

    @media only screen and (max-width: 460px) {
    /* HEADER */
    #logo img{
    max-width: 200px;
    }
    }
    Hope that helps.

    With kind regards.
  • Posts: 8
    It works! Thank you very much!

    Best regards.

    Tancredi
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion