- This topic is empty.
-
AuthorPosts
-
June 26, 2013 at 10:10 pm #45911
sanclementejoe
ParticipantI’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 #140652CodeGraphics
Participantwidth:100%;
June 27, 2013 at 12:19 am #140654TheDoc
MemberThe 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 2:53 am #140666sanclementejoe
ParticipantIs 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 #140677waylaid
MemberAt 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/)
June 27, 2013 at 5:14 am #140678The_Mechanic
MemberThe 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 #140740sanclementejoe
ParticipantThanks @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 #144629sanclementejoe
Participant@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]
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.