Support » Theme: Ignite » Small logo after update

  • Resolved jd1982

    (@jd1982)


    Hi,

    I saw a topic posted here outlining an issue which is very similar to mine. Basically, after one of the last updates, my main logo is now a lot smaller than it was.

    my site is http://jamesdevonshire.com

    My custom CSS is as follows:
    ———————————-
    .social-media-icons i {
    font-size: 40px;
    }
    @media all and (min-width: 900px) {
    #menu-primary #site-description {
    clear: left;
    margin: 0 3em 0 0;
    }
    .social-media-icons.visible {
    margin-top: -1.5em;
    }
    }
    @media all and (max-width: 800px)
    {

    #logo {
    width: 240px !important;
    position: static !important;
    }
    }
    ——————————————

    I tried changing the last part to:
    ——————————————-
    .site-title .logo {
    width: 240px !important;
    position: static !important;
    }
    }
    ——————————————-
    as I saw in the other post but it didn’t make any difference.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hello jd1982,

    It seems that some logo image styling updates has been made to your theme.

    Since I dont know how your logo image used to look before, i’m sending you style changes that lets your site to have full sized logo image that you upload,

    .site-title img {
        max-width: 20em;
        max-height: 2.25em;
    }

    Add the code to your custom css to remove max-width limit to logo image. feel free to change max-width em value as per your size requirement.
    Currently it was 6em in your site

    Hope it helps you.
    Thanks.

    jd1982

    (@jd1982)

    Thanks for the reply. Does that replace the last bit of css or in addition to it?

    Hello jd1982,

    The css selectors for last bit of css you posted and my suggested css are different. So, it doesn’t replace any code. It just adds up to the css that you already have in your site.

    Hope it helps you
    Thanks.

    Theme Author Ben Sibley

    (@bensibley)

    I’m sorry for the change in the update.

    The ID selector was mistakenly removed from the logo which is why this part is no longer applying:

    #logo {
    width: 240px !important;
    position: static !important;
    }

    You can update it like this to make sure it takes effect:

    .logo {
    width: 240px !important;
    position: static !important;
    }
    jd1982

    (@jd1982)

    Hi Ben,

    Thanks for the reply. I’ve edited the CSS as you suggested, but it doesn’t seem to have made any difference?

    Thanks in advance,
    James

    Theme Author Ben Sibley

    (@bensibley)

    James,

    Sorry about that. Please add the following CSS as well:

    .logo {
      max-width: 956px !important;
      max-height: 59px !important;
    }
    jd1982

    (@jd1982)

    Hi Ben,

    Still the same for some reason? Interestingly, if I remove the logo image and select it again from the media library it displays perfectly in the preview window. However, after I hit save and publish, and check the live site it’s small again.

    Theme Author Ben Sibley

    (@bensibley)

    I see what’s happening. The last CSS is being included in a media query that only applies it when the screen is under 800px wide:

    @media all and (max-width: 800px)
    {
    .logo {
        width: 240px !important;
        position: static !important;
      }
    .logo {
      max-width: 956px !important;
      max-height: 59px !important;
      }
    }

    Please try moving it outside the media query like this, and check if it then takes affect:

    @media all and (max-width: 800px)
    {
    
    .logo {
        width: 240px !important;
        position: static !important;
      }
    }
    .logo {
      max-width: 956px !important;
      max-height: 59px !important;
    }
    jd1982

    (@jd1982)

    That worked beautifully, Ben. Thanks very much for your help 🙂

    Theme Author Ben Sibley

    (@bensibley)

    No problem, happy to help 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Small logo after update’ is closed to new replies.