Retina logo AgentPress

[bkbdesign]

I've seen a bunch of posts with tricks for overriding the css to get a larger logo image for retina displays, but unfortunately, none of them applies exactly to the AgentPress theme.

Seems that the code controlling that section is embedded in the body, so anything I'm adding to my stylesheet isn't having any effect.

Any advice??

http://www.bkbtesting.com/sheffersells2016

[Marcy]

Your logo is 320px x 80px, so your retina image would be 640px x 160px.
In functions.php find this section and edit it as below:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'header-selector' => '.site-title a',
	'header-text'     => false,
	//'height'          => 80,
	//'width'           => 320,
         'height'          => 160,
	'width'           => 640,
) );

This will allow you to upload a larger image.

If you use a logo with dimensions that are twice the theme recommended size, then everything should just work with AgentPress Pro.

If you need to change the image size, you can post the dimensions of your retina image here.
You can also use this post to help you with different logo sizes.
https://amethystwebsitedesign.com/add-retina-logo-to-genesis-or-wordpress-themes/

---

Marcy | Amethyst Website Design | Twitter

[bkbdesign]

I did exactly that, and uploaded the retina image through the customizer and it doesn't resize when viewed in a browser. The retina logo on mobile devices however does resize as expected. What am I missing?

[bkbdesign]

Figured it out. Seems that the .header-image .site-title > a was missing background-size: contain. Thanks!

[Marcy]

Great! It looks nice!

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts