I'm trying to get the logo on the mobile version of my site to be centered (only the mobile not desktop). Please help.
EDIT: When I add css to center align the logo, it does the desktop version of the site and not the mobile version. I only want the mobile version to have the center alignment of the logo.
<div class="container">
<header class="header">
<!-- Logo -->
<div class="logo">
<a href="<?php echo esc_url( home_url() ); ?>">
<?php
$logo = get_theme_mod( 'logo_img', false );
$logo2x = get_theme_mod( 'logo2x_img', false );
$logo_width_height = get_theme_mod( 'logo_width_height', '' );
if ( ! empty( $logo ) ) :
?>
<img src="<?php echo esc_url( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" srcset="<?php echo esc_attr( $logo ); ?><?php echo empty ( $logo2x ) ? '' : ', ' . esc_url( $logo2x ) . ' 2x'; ?>" class="img-responsive" <?php echo sanitize_text_field( $logo_width_height ); ?> />
<?php
else :