- This topic has 4 replies, 2 voices, and was last updated 7 years, 8 months ago by .
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.
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.
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.
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?
Figured it out. Seems that the .header-image .site-title > a was missing background-size: contain. Thanks!
© 2023 WPEngine, Inc.