WordPress.org

Ready to get started?Download WordPress

Forums

BlackBird
[resolved] Larger logo doesn't resize to iPhone (9 posts)

  1. thestealthyfox
    Member
    Posted 1 year ago #

    I'd like to use a larger logo than that suggested, as I found it quite small.
    Using a larger logo looks fine on the computer screen, but doesn't resize for iPhone.

    Any suggestions?

    Thanks!

  2. If you look at the theme demo - http://inkthemes.com/wptheme/blackbird-technology/
    The logo doesn't resize here either.

    What you could do is add to your media query and then display a different logo on the phone, but that requires a bit of coding and I would suggest you make a child theme first.

  3. thestealthyfox
    Member
    Posted 1 year ago #

    I already have a child theme as I've modified the theme quite a lot already and I was thinking the same, to have two logos.

    I'm not sure where to start with the coding though, any ideas?

    Thanks.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    .header .logo img {
     max-width: 100%;
    }
  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Actually looking back on what Christine said, your theme uses a grid layout; meaning you need to define a new width for the <div> wrapping the logo when you're using a particular screen size.

    Media Queries is the way to go.

  6. thestealthyfox
    Member
    Posted 1 year ago #

    Thanks for the info.
    I've just used this, but it's not working. Have I missed something out?

    @media only screen and (max-device-width: 480px) {

    header .logo img {
    background: url(http://redwellymedia.com/wp-content/uploads/2013/04/logo-x-small.jpg);
    }}

  7. thestealthyfox
    Member
    Posted 1 year ago #

    Ignore me - I've done it! Used your suggestion within the media query, rather than using two images.

    Thanks for your help :)

  8. OWD_WEB
    Member
    Posted 1 year ago #

    perfect fix! thank Andrew.

    .header .logo img {
    max-width: 100%;
    }

  9. ivhero
    Member
    Posted 11 months ago #

    Worked for me too! Thanks Andrew.

    .header .logo img {
    max-width: 100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic