[tracyholland]

Hello! I’ve created a site using Paeon which I love! The site looks great but having two issues in the header.

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!

[Juanfra Aldasoro]

Hello Tracy,

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.

[tracyholland]

Thank you for your response! When I make changes in the responsive styles, it looks great on mobile, but it seems to turn the pc version to mobile as well. The menu changes tot the same menu on mobile. Any advice you can offer would be appreciated as always.

[Juanfra Aldasoro]

Hello Tracy,

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.

[tracyholland]

So maybe I just need to play with the percentage to get it to appear correctly? This is what I put in per your previous response:

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

I will continue to work on it…

[Juanfra Aldasoro]

Hi Tracy,

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.

[tracyholland]

It is looking good on mobile, but not on a laptop. The navigation on a laptop is going vertical and there is a lot of extra space.

[Juanfra Aldasoro]

Hi Tracy,

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

Best,
Juan.

[tracyholland]

What I edited was under /* — iPad Landscape — */ in the styles.css

[Juanfra Aldasoro]

Hi Tracy,

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

[tracyholland]

Ok, I know what to take out to make it go back. No problem.

[Juanfra Aldasoro]

Excellent 🙂

Have a nice day,
Juan.