Site Logo vs. Title & Tagline vs. Header Image

[Rene]

The logo image is not responsive.

Work-a-round: The Header Image “is” responsive, so remove title and tagline text and use header image as my logo. Problem: when I remove the site title and tag line text, the header changes height.

Ideally the Logo would be responsive and removing the title and tagline text would not change the header image height.

Suggestions?

[Rene]

It looks like the header height is set to a specific height so when there in no logo or title/tag line text it gets smaller.

[Shekhar Bhandari]

Hi Rene,
Yes there is specific height defined for the header although it is without site title or logo. But i am abit confused what you really want to do. Could you please send a url link and explain about your problem.

Thanks.

[Rene]

In the most basic terms, I’d like the logo I use in the header to be responsive …so it scales to fit the entire width of the display it is being viewed on regardless of size.

Look at the attached screencap of your demo …see the horizontal scrollbars below the header?
screencap-1.jpg

Attachments:

You must be logged in to view attached files.

[Anonymous]

Hi Rene,

We can understand your concern there and it is understandable. But we along with many developers follow the philosophy that logo size remains constant in all viewport and it should be made to fit in all screen. For example, see these two themes https://wordpress.org/themes/responsive ( most downloaded theme on wordpress.org ) and http://theme-fusion.com/avada/ ( most downloaded WP theme in ThemeForest ) .

Off course many other developer thinks that logo size should be big or smaller according to screen.

If you can provide us the demo link of your site then we can provide CSS which should resize your logo according to your screen size.

[Rene]

From a developers standpoint perhaps, but from a Marketer’s standpoint, it makes no sense that a 320px wide logo be the same 320px wide on a larger screen where it looks tiny. I mean, why would you even need responsive images anywhere if they always remained the same size regardless of screen resolution? Look at your slideshow …it is responsive and looks great on all screen sizes.

You guys have done a great job on this theme and that’s why I purchased it. But for some feedback… to me, a theme should be either completely responsive or not. In your case, it is responsive except for this logo area so it is not truly responsive.

I’ll use your “email support” and sent access info. Thanks for the help!

[Shekhar Bhandari]

Hi Rene,
To make the logo responsive you should put the following CSS to the child theme css files.

@media (max-width:600px) {
.header-inner {
  -moz-transform:scale(0.8,0.8);
  -webkit-transform:scale(0.8,0.8);
  -o-transform:scale(0.8,0.8);
  -ms-transform:scale(0.8,0.8);
  transform:scale(0.8,0.8);	
  }
}
@media (max-width:400px) {
.header-inner {
  -moz-transform:scale(0.45,0.45);
  -webkit-transform:scale(0.45,0.45);
  -o-transform:scale(0.45,0.45);
  -ms-transform:scale(0.45,0.45);
  transform:scale(0.45,0.45);
}
@media (max-width:300px) {
 .header-inner {
  margin-left:-50px;
  }
}

Thanks.

[Rene]

Shekhar,

Thanks for the css snippet. This worked perfectly in chrome, safari, opera, but does not work in firefox or IE.
http://fauxirondirect.com

[Shekhar Bhandari]

Hi Rene,
While Looking at your site, i found that your header image is large, So, you can add this custom CSSin the child theme to make that work.

.logo img {
   width:100%;
}

[Rene]

Now we are talking! That worked, thank you Shekhar!

[Author]

Posts