Size and color of logo / site title in mobile

  • Resolved catwingz

    (@catwingz)


    8 years, 10 months ago

    Hi, my client is excited about this theme, except for the way the logo shows up in mobile.
    Is there a way to control how much the logo size is reduced? In the past her logo has been an icon with text replacing the site title and tagline. This is reduced to a microscopic size, far too small to read. I have tried using just the shapemark with the text site title, but the logo is still far too small and the color of the title needs to change, possibly the font as well.

    If the logo were only reduced to the scale of the title and the title changes color it would be a solution.

    I have tried a number of CSS solutions but haven’t found the correct styles yet. The site can be viewed here. What code can I use to sort this out?

    Thank you

Viewing 4 replies - 1 through 4 (of 4 total)

  • First of all, don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Once you’re ready to roll with your CSS, here’s the rule I’d add:

    @media screen and (max-width: 360px) {
  #branding img {
    max-height: 100px;
  }
}

    This should overwrite the max-height set on the logo by the theme. Adjust as required!

    Thread Starter catwingz

    (@catwingz)

    Thanks Sarah, custom CSS is already in use.

    This solves the logo size issue nicely. The text is still an issue though. Any suggestions are welcome.

    My latest failed attempt is this—

    #branding #site-details h1#site-title {
color: #0085bd; important!
}

    Looking good!

    The reason your code isn’t working as expected is because it’s targeting the #site-title h1 element itself, but this element has a link (an a element) inside it, and the rule for that link takes precedent. If you target the a element *inside* the h1, it should work as expected.

    This should get everything sorted right out:

    #branding #site-details h1#site-title a {
  color: #0085bd;
}
    Thread Starter catwingz

    (@catwingz)

    Beautiful. Thank you. Using that as my guide I was also able to take care of the tagline. Now all I need to do is change the font and it will be a happy ending. ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Size and color of logo / site title in mobile’ is closed to new replies.