1. In the most recent version of Firefox (Mac) there is a weird gray box that shows up in the header.

2. On my phone (Droid Razor) the header image does not shrink down. Instead it is cut off.

Any advice is greatly appreciated!

I hope you’re doing well.

1. That has to do with the translation plugin that you’ve installed. Test that if you deactivate that one, it won’t be showing.

2. That’s because you are using a banner instead of a logo. The logo isn’t meant to be shrinked. What you can do is play around with the responsive styles. Something like:

@media screen and (max-width: 1024px) {
#logo img{ width: 100%; }
}

Best,
Juan.

Thanks for writing back. That is how it supposed to be. That’s responsiveness. Whenever you hear or see that a site is responsive is because it reacts different to the different sizes. In other words, the design has some breaking points that change the structure. These breaking points are congruent to the main devices in the market.

If you check the theme demo site you’ll see it works that way, like every site self-proclaiming as responsive.

Best,
Juan.

@media screen and (max-width: 1024px) {
#logo img{ width: 100%; }
}

I will continue to work on it…

Thanks for your prompt response.

I don’t understand your response. Is it looking good on mobile now?

Responsive styles are viewed in mobile devices and desktop.

Best,
Juan.

It seems you’ve edited the styles for the desktop version and used the mobile ones.

Best,
Juan.

Thanks for your prompt response.

I understand, unfortunately we can’t provide support for customisation. You’re always free to re-download the theme files, make comparisons and have them as a starting point.

Thanks for understanding,
Juan