Title: Responsive logo issue
Last modified: August 20, 2016

---

# Responsive logo issue

 *  [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/)
 * [http://bbarwa.redwebtest.com/](http://bbarwa.redwebtest.com/)
 * If you look at my home page the logo looks way too small. It has to be this way
   for the responsive design for the phone size.
 * Can I have a larger logo for the full screen mode where the client name would
   be on 2 lines and wider and then a smaller logo with the client name on 4 lines
   for the phone?
 * I want to use two logo designs/png’s and have the template assign each one depending
   on size instead of one logo in various sizes.

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/responsive-logo-issue/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/responsive-logo-issue/page/2/?output_format=md)

 *  [Christine Rondeau](https://wordpress.org/support/users/crondeau/)
 * (@crondeau)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624522)
 * Yes, you can have different logos on different display.
    Using media queries 
   you can just specify a different logo.
 * If you look on my site – [http://www.bluelimemedia.com/](http://www.bluelimemedia.com/)
   
   My logo is big on the desktop, but then at smaller size, I just swap the image
   for a smaller one.
 *  Thread Starter [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624526)
 * No, that’s not what I mean at all. I want a logo with big text on 2 lines at 
   the large size and then a smaller, narrower logo with text on 4 lines. I want
   to use two COMPLETELY different logo arrangements
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624527)
 * Using a responsive desgin you can’t just change the src=”” URL of an image to
   point to a different image. It doesn’t work that way. If you want to do it that
   way you’ll have to set up a slightly complicated JavaScript script to check the
   windows resize event and set the image acordingly.
 * The correct way to do this in a responsive layout is to use CSS. Set up an area
   as the logo area and set the logo image file as it’s background image. Then when
   the screen size gets down to the required size, set teh background as the smaller
   image and set the correct sizing on that element.
 *  Thread Starter [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624602)
 * Sounds like a cool idea – anyone have a sample line of code to show me how to
   do that?
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624635)
 * Sample code… for which bit?
 *  Thread Starter [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624643)
 * I’m looking for exactly how to implement this. Do I just edit my css? If so what
   code do I insert to have say 3 different logos for 3 screen sizes from large 
   to iphone?
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624644)
 * Yes, you should be able to jsut edit your CSS – if you’ve got your header.php
   file set up with the right code for the logo.
 * As an example (not tested, but just to give you an idea):
 * Header.php:
    `<div id="header_logo"></div>`
 * CSS:
 *     ```
       #header_logo {
           width: 250px;
           height: 100px;
           background: url("path/to/image.jpg") top left no-repeat;
       }
       @media screen and (max-width: 500px) {
           #header_logo {
               width: 100px;
               height: 50px;
               background: url("path/to/image_small.jpg") top left no-repeat;
           }
       }
       ```
   
 *  Thread Starter [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624658)
 * I think this code gets me closer. Here’s the code that the maker of my theme 
   suggested but it does not allow for different logo designs like yours does. Where
   would I insert a call for a different logo at each size:
 * [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   479px){
    img#logo {height: 220px; width: 220px;}} [@media](https://wordpress.org/support/users/media/)
   only screen and (max-width: 767px){ img#logo {height: 240px; width: 360px;}} 
   [@media](https://wordpress.org/support/users/media/) only screen and (max-width:
   960px) and (min-width: 768px){ img#logo {height: 240px; width: 380px;}} img#logo{
   height: 244px; width: 480px;}
 * They said adding this to my CSS is all I have to do?
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624665)
 *     ```
       @media only screen and (max-width: 479px){
       img#logo {height: 220px; width: 220px; background: url('path/to/image.jpg')}}
       ```
   
 * That’s all you need to do.
 *  Thread Starter [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624669)
 * Thanks for the help on this! The second logo appears on the phone size but the
   first logo doesn’t go away – so I have 2 logos on top of each other?
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624680)
 * There’s no way to tell what’s going on there without you posting either a a link
   or some code. My only guess at this stage is that you haven’t set up the HTML
   the right way and there’s two areas that the logo can be in, not one.
 *  Thread Starter [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624683)
 * What kind of link? This is a template from Elegant Themes.
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624684)
 * A link to your actual site. Like I said, it’s impossible to see what’s happening
   without actually seeing anything that you have done there.
 *  Thread Starter [magicmarker1955](https://wordpress.org/support/users/magicmarker1955/)
 * (@magicmarker1955)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624685)
 * It’s at the top of this post but here it is again:
 * [http://bbarwa.redwebtest.com/](http://bbarwa.redwebtest.com/)
 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/#post-3624686)
 * Ahhh sorry. I should have looked back up there.
 * I’ve had a look and I can’t see the logo doing anything at all. The media rules
   kick in but it looks like they are all pointing to the same logo file.
 * BUT, one thing that I did see is that you didn’t do what I said. You have to 
   remove the `<img>` tag that contains the logo and use a `<div>` tag instead and
   have the background attached to the div. Images can’t have other images as backgrounds
   so the way that you’ve got it set up now won’t work.

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/responsive-logo-issue/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/responsive-logo-issue/page/2/?output_format=md)

The topic ‘Responsive logo issue’ is closed to new replies.

 * In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/)
 * 19 replies
 * 3 participants
 * Last reply from: [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/responsive-logo-issue/page/2/#post-3624696)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics