Tagline is not centred under logo in some tablets. How do I fix this?

  • I had to add code to my blogs child theme header.php to show my tagline using because the theme does many interesting things, but unlike other themes, it does not add the tagline.

    The only problem I’ve had is in Thrive architect is in the tablet view it’s to the left of the logo vs underneath and centred. In desktop and mobile it looks fine.

    On Firefox’s developer testing, all the tablets look fine

    But it does screw up on Google chromes responsive testing.

    Pixel 2 looked fine in Firefox but is screwed up in google chrome responsive testing and Chrome also shows the tagline is to the right of the logo vs underline and so does Pixel 2 XL, Nexcess 4, 5, 6, 7,9 and LG Optimus L70.

    Worked fine on all the phones in google chrome besides the iPhone 6/7.

    I have it password protected on a testing server so I can’t post the link to test it on one of the bigger responsive testing sites.

    I originally pasted the tagline just using </p></p> code in and tried center tag that didn’t work, I went into codex and found the code that called out the tagline under settings then general and modified it.

    So I’m using Thrive Theme’s Focus blog and adding this code into the header.php to a child theme to protect it from updates.

    <div><H3>
<?php printf( get_bloginfo ( 'description' ) ); ?>
</H3></div>

    Here’s a portion of the header.php code in the child theme that I’m placing it under. How do I know if it’s the right place?

    <div id="text_logo"
class="<?php if ( $options['logo_color'] == "default" ): ?><?php echo $options['color_scheme'] ?><?php else: ?><?php echo $options['logo_color'] ?><?php endif; ?> ">
<a>"><?php echo $options['logo_text']; ?></a>
</div>

<?php
endif;
elseif ( $options['logo'] && $options['logo'] != "" ):
$thrive_logo = true;
if ( get_theme_mod( 'thrivetheme_header_logo' ) != 'hide' ):
?>
<div id="logo" class="lg left">
<a>">
<img />"
alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"/>
</a>
</div>

<div><H3><center>
<?php printf( get_bloginfo ( 'description' ) ); ?>
</center></H3></div>

Is my code correct? 

<div><H3>
<?php printf( get_bloginfo ( 'description' ) ); ?>
</H3></div>

    Is it in the right place in the header?

    Do I need to put some CSS into change it? If so what CSS should I use?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)

  • <h3> tags are typically aligned left.
    <center> is obsolete, so you shouldn’t use it.
    I would use <?php echo get_bloginfo ( 'description' ); ?> and put it in a <span> or a <p> instead of a <div>. And then put it in both parts of the if statement, inside the same <div> as the logo, so it gets the same style.

    Thread Starter addcoach

    (@addcoach)

    Thanks Joy!

    been spending days on this.

    Worked perfectly. Passed all the tests thrive architect tablet view and in firefox and google chrome responsive testing.

    I used this code.

    <p><H3>
    <?php echo get_bloginfo ( ‘description’ ); ?>
    </H3></p>

    and put it here.

    elseif ( $options[‘logo’] && $options[‘logo’] != “” ):
    $thrive_logo = true;
    if ( get_theme_mod( ‘thrivetheme_header_logo’ ) != ‘hide’ ):
    ?>
    <div id=”logo” class=”lg left”>
    “>
    ”
    alt=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>”/>

    <p><H3>
    <?php echo get_bloginfo ( ‘description’ ); ?>
    </H3></p>

    </div>

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Tagline is not centred under logo in some tablets. How do I fix this?’ is closed to new replies.