Custom header image in Generate Pro theme

[Hashim]

Hi there,

To me this looks like a difficult problem. But to you this might be something very easy. So I hope you can help me out with this one.

You can see the problem on my website:

http://hashimnaushahi.com

The Generate Pro theme allows a header image of 360 x 140 pixels. Because my logo is actually 270 x 90 pixels, I added a background of 360 x 140 pixels to my logo image in the same color as the background of the website so that it fits in the header of the theme. And now it looks just the way I want it.

No problems so far...

Until you take a look at the website on a mobile device. Then you can find two issues.

1. Because I want the left side of my logo aligned to the left side of all the other parts of the website, I created the logo image in such a way that the logo itself is left aligned to the background image of the logo.

The result looks great on a desktop or laptop screen. But on a mobile device the logo should be centered on top above the searchbox. But in my case it looks like it's moved to the left in such a way that it doesn't look centered at all, rather it looks off. In reality the image is centered, but because of the empty right side of my header image background (360px - 270px = 90px of empty space left on the right side of the header image), the logo doesn't look centered at all. How do I fix this, so that my logo looks perfectly centered on mobile devices and is still left aligned to the menu and the posts of the website on a larger screen?

2. The image of the logo looks really sharp on my screen. I've created the image in Adobe Illustrator in the exact same size as is required for the custom header of this theme, 360 x 140 pixels. Then I saved it as a transparent PNG-24 file optimized for type so the text looks a bit sharper. But as soon as you look at the logo on mobile devices, it doesn't look that sharp at all. Instead it looks dull and cheap and very unprofessional. Especially when you zoom it in. How do I make my logo look sharp and professional on a larger screen and on mobile devices as well?

I've got absolute faith that someone on this forum can help me solve these two issues. Thank you in advance!

Sincerely,

Hashim Naushahi

http://hashimnaushahi.com

[Hashim]

Solved!

Initially I didn't know what to look for. But now I know it's Retina.

Thanks to the support that has been given before me, I now have a crisp logo image on mobile devices!

Sincerely,

Hashim

[Author]

Posts