Responsive logo on maintenance screen

[fradesimon]

Hi, My site logo doesn’t reduce in size when in maintenance, could you please provide CSS code to make it responsive just like it does for the wp-admin login screen.

 

Thanks in advance.

[Kieran_SQ]

Hi,

You can override the code that generates the maintenance mode by adding the below to your KLEO Child theme’s functions.php

COPY CODE

// Change the maintenance page logo size
if ( ! function_exists( 'kleo_maintenance_mode' ) ) {
	function kleo_maintenance_mode() {

		$logo_path = apply_filters( 'kleo_logo', sq_option_url( 'logo' ) );
		$logo_img  = '<img src="' . $logo_path . '" alt="maintenance" style="margin: 0 auto; display: block; max-width:100px;" />';

		if ( sq_option( 'maintenance_mode', 0 ) == 1 ) {

			/* Theme My Login compatibility */
			if ( class_exists( 'Theme_My_Login' ) && Theme_My_Login::is_tml_page( 'login' ) ) {
				return;
			}

			if ( ! current_user_can( 'edit_themes' ) || ! is_user_logged_in() ) {
				wp_die(
					$logo_img
					. '<div style="text-align:center">'
					. sq_option( 'maintenance_msg', '' )
					. '</div>',
					get_bloginfo( 'name' )
				);
			}
		}
	}

	add_action( 'get_header', 'kleo_maintenance_mode' );
}

Please change the px value on line 6 from 100px to your desired number. Clear any and all caches and CDN’s after saving and press/hold Ctrl+F5 to see your changes.

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[fradesimon]

Hi, thanks for the response this worked a treat. I found changing 100px to 100% works better across all devices.

Once again many thanks 🙂

[Author]

Posts