Grow your CSS skills. Land your dream job.

How to make logo scale down on mobile

  • # June 26, 2013 at 10:10 pm

    I’ve read all about media queries and I believe that’s the correct way to do it, but I can’t get my logo to scale down on mobile phones.

    This is the site: [Coastalrepro.com](http://wordpress.coastalrepro.com/ “CoastalRepro.com”)

    I tried adding this media query to no avail:

    @media all and (max-width: 520px) {
    /* Logo for Mobile */
    .logo a {
    width: 250px;
    height: 47px;
    background-image: url(‘http://wordpress.coastalrepro.com/wp-content/uploads/2013/06/coastalcreative-logo-mobile.png’);
    background-size: 250px 47px;
    }

    Hopefully I’m at least part of the way there….

    # June 26, 2013 at 11:25 pm

    width:100%;

    # June 27, 2013 at 12:19 am

    The easiest way to go about this will involve not using a background image and instead using `` and scaling that (which is super easy!). http://codepen.io/ggilmore/pen/8e8ca861f6bf74122c6e1a824fe76949

    # June 27, 2013 at 12:32 am

    I think for IE8, we’ll have to even define a max height in addition to a max-width. While choosing the max-height, one needs to remember that the height-width ratio should be the same throughout.

    # June 27, 2013 at 2:53 am

    Is there an ideal way to do it with the current background-image setup? It’s set this way in the theme so I’d like to keep it this way but of course ill change it to an image if it comes down to it!

    # June 27, 2013 at 4:58 am

    At the moment your media query isn’t taking precedent over the original CSS for .logo a

    It might be because the containing div – #alterna-header – has an ID which is used for some of the styling. If you change your media query to:

    @media all and (max-width: 520px) {
    /* Logo for Mobile */

    #alterna-header .logo a {

    width: 250px;

    height: 47px;

    background-image: url(‘http://wordpress.coastalrepro.com/wp-content/uploads/2013/06/coastalcreative-logo-mobile.png’);
    background-size: 250px 47px;
    }

    it should work how you want it to. This is a good example for not using IDs for styling (http://css-tricks.com/a-line-in-the-sand/)

    # June 27, 2013 at 5:14 am

    The easiest way to achieve this is not involve it in background image use it in `` tag and set it’s width to 100% and wrap it to any tag whatever you like for example:

    `


    `

    css would be for this:

    `
    #logo img{
    width:100%;
    }`

    # June 27, 2013 at 1:12 pm

    Thanks @Waylaid I will try this out tonight.

    @The_Mechanic I will look at this too. ( I couldn’t see what you said between “in” and “tag” above)

    # July 25, 2013 at 6:37 pm

    @Waylaid, you were spot on and this was the easiest fix. Thank you very much for your help, wish we could hand out kudos.

    (FYI if you wanted to see it in action it’s now at wordpress2.coastalrepro.com as the staging site, will soon just be at coastalrepro.com)

    Thanks everyone else.

    [RESOLVED]

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".