logo size

  • Abe

    (@abu117)


    8 years ago

    Hi, Please see https://www.elitecleaningandrestoration.ca/

    The logo looks great on my desktop, but almost disappears (very small) when viewed on my phone.

    I saw on another post that you showed someone how to make some changes to the custom header.pho file and to the css. My logo size is 275W x 125 h. I changed the customheader.php file (line 14 and 15):
    ‘width’ => 275,
    ‘height’ => 125,
    I also added this to the css:

    .site-header .site-branding .logo img {
    float: left;
    max-width: 100%;
    max-height: 125px !important;
    margin-right: 10px;
    }
    I also added the following css:

    #page .header-container {
    display: table;
    height:350px;
    margin: 0 auto;
    text-align: center;
    max-width: 955px;
    }

    I’m not sure if my logo size messed things up? Or can you suggest something that can make the logo properly on a mobile device?

    Thanks,
    Abe

Viewing 3 replies - 1 through 3 (of 3 total)
  • jasmeetsingh

    (@jasmeetsingh)

    Hii Abe.. ?? I thought I should generalize the solution of it.. ??

    If you are asking about the LOGO settings of the mobile then here We go with the solution.. ??

    Follow the steps..
    1. /wp-content/themes/business-leader/style.css go to this file…
    2. here you have to go to 638-650 line number and you will find the following code..

    .site-header .site-branding .logo img {
    float: left;
    max-width: 100%;
    max-height: 55px;
    margin-right: 10px; }
    @media screen and (max-width: 1024px) {
    .site-header .site-branding .logo img {
    width: 30px; [///PLACE WHERE THING IS TO BE CHANGED////]
    padding: 2.5px 0; } }

    What ever size you want you can set accordingly in place of 30px.. ??
    Hope this will be helpful for you..

    jasmeetsingh

    (@jasmeetsingh)

    And if you are asking about the Font and color on the mobile then here We go with the solution.. ??

    Follow the steps..
    1. /wp-content/themes/business-leader/style.css go to this file…
    2. here you have to go to 647-654 line number and you will find the following code..

    .site-header .site-branding .site-title {
    display: inline;
    font-weight: 100;
    font-size: 32px; [///PLACE WHERE THING IS TO BE CHANGED FOR FONT SIZE////]
    font-size: 3.2rem;
    clear: none;
    line-height: normal;[///PLACE WHERE THING IS TO BE CHANGED FOR DISTANCE BETWEEN . THE LINES IN THE HEADER Title////]
    color: white; [///PLACE WHERE THING IS TO BE CHANGED FOR FONT COLOR////]

    Hope You find this helpful.

    jasmeetsingh

    (@jasmeetsingh)

    And Do remember after changing the code.. CLEAR THE CACHE OF YOUR BROWSER.. Its Really necessary else changes may not be reflected.. ??

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