• Resolved Piani

    (@webbmasterpianise)


    The SITE-LOGO is not working properly in responsive mode.

    When I look at the site in mobile or smaller devices the logo is cropped to hard and there is aloth of whithe space on the right side of the logo.

    Please see https://goteborgsmagiskaklubb.se/ and see on mobile or make the window smaller in the browser on normal monitor.

    In the first responsive step there is to much white to the right of the logo and it is not in center. And if you zoom down even more the logo instead covers the screen and is to big. I dont know why you use float:left it should be display:block and auto margins.

    Can ofc. be done in hacking some CSS but theres so much responsive features that this should be fixed in the main theme.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Piani

    (@webbmasterpianise)

    I made this hack to solve the issue on my site so its no longer there. Dont know if it can be solven more nicley coded. I notised there is a difference in padding between some sizes that must be taken care of.

    Placed it in my custom CSS.

    #site-logo {
    	float: none !important;
    	margin-top: 0px !important;
    	margin-bottom: 0px !important;
    	text-align: center !important;
    	width: 100% !important;
    	max-width: 100% !important;
    	height: auto !important;
    	margin-left: 0px !important;
    }
    
    .hgroup-wrap {
    	padding-bottom: 10px !important;
    	padding-top: 15px !important;
    }

    And for responsive adjustments:

    /* =Responsive Structure
    -----------------------------------------------*/
    /* All Tablet Portrait size smaller than standard 1079 (devices and browsers) */
    @media only screen and (max-width: 1078px) {
    #site-logo {
    	float: none !important;
    	margin-top: 0px !important;
    	margin-bottom: 0px !important;
    	text-align: center !important;
    	width: 100% !important;
    	max-width: 100% !important;
    	height: auto !important;
    	margin-left: 0px !important;
    }
    
    #site-title a img {
    		max-width: 100% !important;
    }
    
    .hgroup-wrap {
    	padding-bottom: 10px;
    	padding-top: 15px;
    	padding-left: 20px !important;
    	padding-right: 20px !important;
    }
    
    }
    
    /* All Mobile Portrait size smaller than 768 (devices and browsers) */
    @media only screen and (max-width: 767px) {
    #site-logo {
    	float: none !important;
    	margin-top: 0px !important;
    	margin-bottom: 0px !important;
    	text-align: center !important;
    	width: 100% !important;
    	max-width: 100% !important;
    	height: auto !important;
    	margin-left: 0px !important;
    }
    
    #site-title a img {
    		max-width: 100% !important;
    }
    
    .hgroup-wrap {
    	padding-bottom: 10px;
    	padding-top: 15px;
    	padding-left: 20px !important;
    	padding-right: 20px !important;
    }
    
    }
    
    /* All Mobile landscape size and All Mini Tablet Portrait size smaller than standard 768 and larger than 480 (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    #site-logo {
    	float: none !important;
    	margin-top: 0px !important;
    	margin-bottom: 0px !important;
    	text-align: center !important;
    	width: 100% !important;
    	max-width: 100% !important;
    	height: auto !important;
    	margin-left: 0px !important;
    }
    
    #site-title a img {
    		max-width: 100% !important;
    }
    
    }
    /* All Mobile size smaller than standard 320 (devices and browsers) */
    @media only screen and (max-width: 319px) {
    #site-logo {
    	float: none !important;
    	margin-top: 0px !important;
    	margin-bottom: 0px !important;
    	text-align: center !important;
    	width: 100% !important;
    	max-width: 100% !important;
    	height: auto !important;
    	margin-left: 0px !important;
    }
    
    #site-title a img {
    		max-width: 100% !important;
    }
    
    }

    Hi Piani,

    I hope you are well today and thanks for posting here.

    I have tested it on my test site and the header image is working fine for me using latest version of Travelify theme except on mobile devices it would display nice if center aligned it which can be done using the following CSS code.

    @media ( max-width: 760px) {
    
    #site-logo {
        float: none;
        text-align: center;
    }
    
    }

    The CSS code solution that you have shared here is only applicable for your custom functionality where the header logo is rectangular & wider enough to fill whole page width and the header social icons are not displayed.

    Best Regards,
    Movin

    Thread Starter Piani

    (@webbmasterpianise)

    Thanks for the input and explanation. Yes, I do not use the social icons so that ofc is affecting the function.

    I see there is a option to use “header-image” instead and that might be better for the design I use. But that image is not clickable and do not link the the home page URL. Is that an error at my site or can that be added as an option in future relaese please?

    Hi Piani,

    You can also link the header image by adding the following custom code in the functions.php file of you child theme.

    function modify_travelify_header(){
    
        remove_action( 'travelify_header', 'travelify_headerdetails' );
        add_action('travelify_header', 'custom_travelify_headerdetails', 1);
    }
    add_action('init', 'modify_travelify_header' );
    
    /**
     * Shows Header Part Content
     *
     * Shows the site logo, title, description, searchbar, social icons etc.
     */
    function custom_travelify_headerdetails() {
    ?>
    	<?php
    		global $travelify_theme_options_settings;
       	$options = $travelify_theme_options_settings;
    
       	$elements = array();
    		$elements = array(
    			$options[ 'social_facebook' ],
    			$options[ 'social_twitter' ],
    			$options[ 'social_googleplus' ],
    			$options[ 'social_linkedin' ],
    			$options[ 'social_pinterest' ],
    			$options[ 'social_youtube' ],
    			$options[ 'social_vimeo' ],
    			$options[ 'social_flickr' ],
    			$options[ 'social_tumblr' ],
    			$options[ 'social_instagram' ],
    			$options[ 'social_rss' ],
    			$options[ 'social_github' ]
    		);
    
    		$flag = 0;
    		if( !empty( $elements ) ) {
    			foreach( $elements as $option) {
    				if( !empty( $option ) ) {
    					$flag = 1;
    				}
    				else {
    					$flag = 0;
    				}
    				if( 1 == $flag ) {
    					break;
    				}
    			}
    		}
    	?>
    
    	<div class="container clearfix">
    		<div class="hgroup-wrap clearfix">
    					<section class="hgroup-right">
    						<?php travelify_socialnetworks( $flag ); ?>
    					</section><!-- .hgroup-right -->
    				<hgroup id="site-logo" class="clearfix">
    					<?php
    						if( $options[ 'header_show' ] != 'disable-both' && $options[ 'header_show' ] == 'header-text' ) {
    						?>
    							<h1 id="site-title">
    								<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    									<?php bloginfo( 'name' ); ?>
    								</a>
    							</h1>
    							<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    						<?php
    						}
    						elseif( $options[ 'header_show' ] != 'disable-both' && $options[ 'header_show' ] == 'header-logo' ) {
    						?>
    							<h1 id="site-title">
    								<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    									<img src="<?php echo $options[ 'header_logo' ]; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
    								</a>
    							</h1>
    						<?php
    						}
    						?>
    
    				</hgroup><!-- #site-logo -->
    
    		</div><!-- .hgroup-wrap -->
    	</div><!-- .container -->
    	<?php $header_image = get_header_image();
    			if( !empty( $header_image ) ) :?>
                                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    				<img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
                                </a>
    			<?php endif; ?>
    	<?php
    		if ( has_nav_menu( 'primary' ) ) {
    			$args = array(
    				'theme_location'    => 'primary',
    				'container'         => '',
    				'items_wrap'        => '<ul class="root">%3$s</ul>'
    			);
    			echo '<nav id="main-nav" class="clearfix">
    					<div class="container clearfix">';
    				wp_nav_menu( $args );
    			echo '</div><!-- .container -->
    					</nav><!-- #main-nav -->';
    		}
    		else {
    			echo '<nav id="main-nav" class="clearfix">
    					<div class="container clearfix">';
    				wp_page_menu( array( 'menu_class'  => 'root' ) );
    			echo '</div><!-- .container -->
    					</nav><!-- #main-nav -->';
    		}
    	?>
    		<?php
    		if( is_home() || is_front_page() ) {
    			if( "0" == $options[ 'disable_slider' ] ) {
    				if( function_exists( 'travelify_pass_cycle_parameters' ) )
       				travelify_pass_cycle_parameters();
       			if( function_exists( 'travelify_featured_post_slider' ) )
       				travelify_featured_post_slider();
       		}
       		}
    
    		else {
    			if( ( '' != travelify_header_title() ) || function_exists( 'bcn_display_list' ) ) {
    		?>
    			<div class="page-title-wrap">
    	    		<div class="container clearfix">
    	    			<?php
    		    		if( function_exists( 'travelify_breadcrumb' ) )
    						travelify_breadcrumb();
    					?>
    				   <h3 class="page-title"><?php echo travelify_header_title(); ?></h3><!-- .page-title -->
    				</div>
    	    	</div>
    	   <?php
    	   	}
    		}
    }

    Best Regards,
    Movin

    Thread Starter Piani

    (@webbmasterpianise)

    Thanks for a quick reply with awesome code!

    You are most welcome here ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Header image is not responsive’ is closed to new replies.