Fixing mobile display issues with my widget

Hello,
URL: http://yourtechadvisors.com
On a mobile device, the profile widget gets pushed under the breadcrumbs. Is there a way to align the widget to the right like shown on desktop view and then have the breadcrumbs align to the left under the profile widget? This allows for more breadcrumb room before wrapping.

Thanks.

  • Sajid
    • DEV MAN’s Sidekick

    Hi Alex,

    Hope you are doing good today :slight_smile:

    I am sorry but you can make it display like desktop on mobile (side-by-side) because there is no enough room on the screen.

    Instead its good if you stack both elements under each other. Let me know if you want to stake so I could give you CSS code.

    Cheers, Sajid

  • Alex Stine
    • System Administrator

    Hello,
    Here is the code I have in header.php.

    <?php
    /**
     * The Header for our theme.
     *
     * @package WordPress
     * @subpackage Elegant WPExplorer Theme
     * @since Elegant 1.0
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width">
    	<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    	<?php if ( get_theme_mod('wpex_custom_favicon') ) { ?>
    		<link rel="shortcut icon" href="<?php echo get_theme_mod('wpex_custom_favicon'); ?>" />
    	<?php } ?>
    	<!--[if lt IE 9]>
    		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    	<![endif]-->
    	<?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    
    <!-- Begin Body -->
    <body <?php body_class(); ?>>
    
    <div id="wrap" class="clearfix">
    
    	<div id="header-wrap">
    		<?php wpex_hook_header_before(); ?>
    		<header id="header" class="clearfix">
    			<?php wpex_hook_header_top(); ?>
    			<div id="logo">
    				<?php if( get_theme_mod('wpex_logo') ) { ?>
    					<a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><img src="<?php echo get_theme_mod( 'wpex_logo' ); ?>" alt="<?php echo get_bloginfo( 'name' ) ?>" /></a>
    				<?php } else { ?>
    					 <h2><a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h2>
    				<?php } ?>
    			</div><!-- /logo -->
    			<nav id="navigation" class="clearfix">
    					<?php wp_nav_menu( array(
    						'theme_location'	=> 'main_menu',
    						'sort_column'		=> 'menu_order',
    						'menu_class'		=> 'sf-menu',
    						'fallback_cb'		=> false
    					)); ?>
    			</nav><!-- /navigation -->
    			<?php wpex_hook_header_bottom(); ?>
    		</header><!-- /header -->
    		<?php wpex_hook_header_after(); ?>
    	</div><!-- /header-wrap -->
    
    	<?php wpex_hook_content_before(); ?>
    	<div id="main-content" class="clearfix">
    	<?php
    if ( is_user_logged_in() ) {
    	$current_user = wp_get_current_user();
    	echo '<div style="float: right; width: 200px;"><div style="float: left; padding-right: 20px;">'.get_avatar( $current_user->ID, 32 ).'</div><div><p>Welcome '.$current_user->display_name.'!<br><a href="http://yourtechadvisors.com/edit-profile">Edit Profile</a></p></div></div>';
        }
    ?>
    <div id="custom-inner-header">
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
        <?php if(function_exists('bcn_display'))
        {
            bcn_display();
        }?>
    </div>
    </div>
    	<?php wpex_hook_content_top(); ?>
    
    	<?php
    	if ( is_front_page() ) {
    		// Display subtitle if defined in the options panel
    		if ( get_bloginfo('description') ) {
    			// Display subtitle as long as it's not a paginated page
    			if ( !is_paged() ) { ?>
    			<header id="homepage-header">
    				<h1 id="homepage-title"><?php echo get_bloginfo('description'); ?></h1>
    				<?php get_search_form(); ?>
    			</header><!-- /homepage-header -->
    		<?php }
    		}
    	} ?>

    Here is the related CSS code.

    .breadcrumbs {
        font-size: 16px;
        margin-left: 20px;
    }
    .breadcrumbs:before {
        content: 'You are here: ';
    }
    
    #custom-inner-header > .breadcrumbs {
        width: 48%;
        display: inline-block;
        vertical-align: top;
    }
    
    #custom-inner-header {
        background: white;
    }

    Thanks.

  • Kasia Swiderska
    • Support nomad

    Hello Alex,

    Please move this part of code

    <?php
    if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    echo '<div style="float: right; width: 200px;"><div style="float: left; padding-right: 20px;">'.get_avatar( $current_user->ID, 32 ).'</div><div><p>Welcome '.$current_user->display_name.'!<br><a href="http://yourtechadvisors.com/edit-profile">Edit Profile</a></p></div></div>';
    }
    ?>

    to inside the the div with ID custom-inner-header. This will fix the profile widget.

    kind regards,
    Kasia

  • Alex Stine
    • System Administrator

    Hello,
    Unfortunately, it did not fix it, please view the revised file below.

    <?php
    /**
     * The Header for our theme.
     *
     * @package WordPress
     * @subpackage Elegant WPExplorer Theme
     * @since Elegant 1.0
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width">
    	<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    	<?php if ( get_theme_mod('wpex_custom_favicon') ) { ?>
    		<link rel="shortcut icon" href="<?php echo get_theme_mod('wpex_custom_favicon'); ?>" />
    	<?php } ?>
    	<!--[if lt IE 9]>
    		<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
    	<![endif]-->
    	<?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    
    <!-- Begin Body -->
    <body <?php body_class(); ?>>
    
    <div id="wrap" class="clearfix">
    
    	<div id="header-wrap">
    		<?php wpex_hook_header_before(); ?>
    		<header id="header" class="clearfix">
    			<?php wpex_hook_header_top(); ?>
    			<div id="logo">
    				<?php if( get_theme_mod('wpex_logo') ) { ?>
    					<a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><img src="<?php echo get_theme_mod( 'wpex_logo' ); ?>" alt="<?php echo get_bloginfo( 'name' ) ?>" /></a>
    				<?php } else { ?>
    					 <h2><a href="<?php echo home_url(); ?>/" title="<?php echo get_bloginfo( 'name' ); ?>" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h2>
    				<?php } ?>
    			</div><!-- /logo -->
    			<nav id="navigation" class="clearfix">
    					<?php wp_nav_menu( array(
    						'theme_location'	=> 'main_menu',
    						'sort_column'		=> 'menu_order',
    						'menu_class'		=> 'sf-menu',
    						'fallback_cb'		=> false
    					)); ?>
    			</nav><!-- /navigation -->
    			<?php wpex_hook_header_bottom(); ?>
    		</header><!-- /header -->
    		<?php wpex_hook_header_after(); ?>
    	</div><!-- /header-wrap -->
    
    	<?php wpex_hook_content_before(); ?>
    	<div id="main-content" class="clearfix">
    <div id="custom-inner-header">
    <?php
    if ( is_user_logged_in() ) {
    	$current_user = wp_get_current_user();
    	echo '<div style="float: right; width: 200px;"><div style="float: left; padding-right: 20px;">'.get_avatar( $current_user->ID, 32 ).'</div><div><p>Welcome '.$current_user->display_name.'!<br><a href="http://yourtechadvisors.com/edit-profile">Edit Profile</a></p></div></div>';
        }
    ?>
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
        <?php if(function_exists('bcn_display'))
        {
            bcn_display();
        }?>
    </div>
    </div>
    	<?php wpex_hook_content_top(); ?>
    
    	<?php
    	if ( is_front_page() ) {
    		// Display subtitle if defined in the options panel
    		if ( get_bloginfo('description') ) {
    			// Display subtitle as long as it's not a paginated page
    			if ( !is_paged() ) { ?>
    			<header id="homepage-header">
    				<h1 id="homepage-title"><?php echo get_bloginfo('description'); ?></h1>
    				<?php get_search_form(); ?>
    			</header><!-- /homepage-header -->
    		<?php }
    		}
    	} ?>

    Thanks.

  • Sajid
    • DEV MAN’s Sidekick

    Hi Alex,

    Hope you are doing good today :slight_smile:

    Where exactly you want the profile widget to be on desktop ? Could you please share two screenshot describing this is current and this how you want it to look like ?

    This way we could better assist you fix this issue.

    Thanks for understanding and look forward towards your response :slight_smile:
    Cheers, Sajid

  • Rupok
    • Support Ninja

    Hi Alex

    Hope you had a wonderful day.

    Is there a way to align the widget to the right like shown on desktop view and then have the breadcrumbs align to the left under the profile widget?

    Thanks for granting Support Access. I've logged in and made some CSS adjustments. Can you please check and confirm? I used the following custom CSS:

    #custom-inner-header {
        height: 80px;
    }
    article {
      width: 100%;
    }

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.