Higher resolution logo

Hello,

When I go to upload the logo to my site, it scales the image to 200x65.

While this works at the standard zoom on desktop, on the tablet and mobile version of the site, it looks blurry and pixelated.

I tried changing some stuff in my child theme’s CSS, but haven’t found a solution to be able to upload a higher-resolution logo.

The site is under development at wgarciatest.space.

Thanks,
Will

Hello Will,

Please try to paste the code below into functions.php file of your child theme.

function astrid_setup() {
	/*
	 * Make theme available for translation.
	 * Translations can be filed in the /languages/ directory.
	 * If you're building a theme based on Astrid, use a find and replace
	 * to change 'astrid' to the name of your theme in all the template files.
	 */
	load_theme_textdomain( 'astrid', get_template_directory() . '/languages' );

	// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

	/*
	 * Let WordPress manage the document title.
	 * By adding theme support, we declare that this theme does not use a
	 * hard-coded <title> tag in the document head, and expect WordPress to
	 * provide it for us.
	 */
	add_theme_support( 'title-tag' );

	/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
	 */
	add_theme_support( 'post-thumbnails' );
	add_image_size('astrid-large-thumb', 700);
	add_image_size('astrid-medium-thumb', 520);
	add_image_size('astrid-small-thumb', 360);
	add_image_size('astrid-project-thumb', 500, 310, true);
	add_image_size('astrid-client-thumb', 250);
	add_image_size('astrid-testimonial-thumb', 100);

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary' 	=> esc_html__( 'Primary', 'astrid' ),
		'footer' 	=> esc_html__( 'Footer', 'astrid' ),
	) );

	/*
	 * Switch default core markup for search form, comment form, and comments
	 * to output valid HTML5.
	 */
	add_theme_support( 'html5', array(
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption',
	) );

	/*
	 * Enable support for Post Formats.
	 * See https://developer.wordpress.org/themes/functionality/post-formats/
	 */
	add_theme_support( 'post-formats', array(
		'aside',
		'image',
		'video',
		'quote',
		'link',
	) );

	// Set up the WordPress core custom background feature.
	add_theme_support( 'custom-background', apply_filters( 'astrid_custom_background_args', array(
		'default-color' => 'f5f9f8',
		'default-image' => '',
	) ) );

	add_theme_support( 'custom-logo', array(
		'height'      => '',
		'width'       => '',
		'flex-height' => true,
	) );	
}

Please let me know if you need more help.

Kind Regards, Roman.

Awesome, thanks Roman!

It’s almost there! The aspect ratio gets thrown off when the width of the site gets below 900px or so. (link: http://imgur.com/OkknJ0r.jpg)

Also, totally unrelated, what would I need to edit to add responsive sizing to the text inside the header button?

OK, weird.

It’s maintaining the proper aspect ratio in Opera and in mobile browsers at low-width resolutions, but not in Edge or Firefox.

The aspect ratio is actually off at all resolutions on all browsers except Opera, Chrome for Android, and Safari for iOS.

Hello Will,

If you don’t plan to change your logo, then please try to add this CSS rule:

a.custom-logo-link > img.custom-logo {
    max-width: 276px;
}

Can you please create a new topic for your button issue?

Kind Regards, Roman.

I added the code in question to the child theme’s styles.css.

It is fixing the width of the logo at mobile widths and on desktops, but at resolutions between around 700px and 900px wide, the aspect ratio is still improper.

Again, thank you so much for the help, Roman! I really appreciate it.

OK, from 800-1024 px wide, the ratio is off, and from anything above 1200px wide, the ratio is also off. Anything below 800 is good, as is everything between 1024 and 1200.

Thanks again!!

Increasing the max-height of “.custom-logo-link img” in the parent styles.css fixes it, but when I put this in the child theme, even with !important, it doesn’t work.

Sorry I’m such a newbie, I’m trying, lol!

Hello Will,

I have just checked your website once again and your logo looks okay now on different resolutions. Can you please try to clear your browser cache?

Kind Regards, Roman.

It started to look OK after I made the following change to the parent theme’s styles.css.

.custom-logo-link img {
display: block;
max-height: 150px;
margin: 0 auto;
}

However, when I attempted to put this into the child theme’s styles.css, it didn’t change anything, even with an !important tag. For obvious reasons, I would prefer that this change would be in the child theme if possible.

EDIT: Apparently, I’m incorrect. Tried reverting to the old parent theme’s styles.css, and things are fixed. My apologies.

Hello Will,

Please don’t modify parent theme files because you will lose those modifications after parent theme update.

Kind Regards, Roman.

Hi Roman,

I am facing the same issue as Will about logo low resolution.
My site is visible at www.saveurs-en-scene.com/new/
With a 100% zoom, it is OK. But with 110% or 120%, the logo is really bad.

I am bit lost with the messages between Will and you.Would you please kindly tell me again what needs to be done to have a clear logo on the top ?
Do I need to add a code snippet ?

By the way, the logo displayed in the footer is perfect - this is how it should look as well in the header.

Thanks / merci
Carole

Hello Carole,

Please create a new topic for your issue in order to make it easier to help you.

Kind Regards, Roman.