How to make logo scale down on mobile

[sanclementejoe]

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….

[CodeGraphics]

width:100%;

[TheDoc]

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

[sanclementejoe]

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!

[waylaid]

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 (https://css-tricks.com/a-line-in-the-sand/)

[The_Mechanic]

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%;
}`

[sanclementejoe]

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)

[sanclementejoe]

@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]

[Author]

Posts