Ready to get started?Download WordPress


Misty Lake
Misty Lake Theme: How to add contact info across from tagline (8 posts)

  1. Little Laura
    Posted 6 months ago #

    I want to add my phone number, with my email address directly below it, across from my tagline above my header image. I'm willing to work at it, just don't know how. Should I create a background image the same color as my background with the text in that position? It would be so much easier if I just knew what code to enter into my child theme. (I tried making my contact info part of my header image in Photoshop, but it's too small on a mobile device.)

    Thanks much for any ideas.

    website: creaturecomfortsofbalto.com

  2. Hi there, in your child theme, try taking this line (around line 31, if you haven't already made any changes):

    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    ...and changing it to:

    <h2 class="site-description"><?php bloginfo( 'description' ); ?> <span class="topinfo">phone XXX-XXX-XXXX | email <a href="mailto:youremail@yourdomain.com">youremail@yourdomain.com</a></span></h2>

    In your CSS, add this class:

    .topinfo {
      float: right;

    It should look something like this: https://cloudup.com/cP57SlSawUZ

    Edit your phone number and email address to your real ones.

    Let me know how it goes.

  3. Little Laura
    Posted 6 months ago #

    Thank you very much, Kathryn, for giving me what I need... only I'm rather new at this and am not sure how to use it! Specifically, I don't know how to access the html file for the first of the code changes you suggested. My child theme only has the CSS sheet in it, with the line that pulls in the original code (@import url("../misty-lake/style.css");) and then my changes below that.

    I can connect to my website using an FTP program, but I'm not sure at that point what to do... or how even to learn what to do!

    Your example on cloudup.com is EXACTLY what I would like my contact info to look like!

  4. Hi there, here are some guides to working with child themes:


    I forgot to mention above which child-theme file to edit, sorry about that. :-) You'll need to create a copy of the header.php file and put it in your child theme folder, and make the edits I mentioned in that copy of the file.

    Let me know how it goes!

  5. Little Laura
    Posted 6 months ago #

    Hey again.

    Got it done with the change you suggested, and it looks nice! Only one problem: It only looks nice when viewed on a computer...Something's messed up with the spacing when viewed on a mobile device, specifically a phone. The email address isn't showing completely (and the beginning of the phone info is also incomplete).

    I do have a plugin that was working well previously (MobilePress), making the site compatible with mobile devices, but the code change isn't working well with it...(slight grimace and sigh)

  6. Hi there - first off, I noticed a small piece of duplication I missed earlier. In header.php, in this line:

    <span class="topinfo" style="float: right;">

    ...could you please remove this:

    style="float: right;

    So the line looks just like this:

    <span class="topinfo">

    Next, if you turn off your mobile plugin temporarily, do you see the same issue on your phone? When I just resize the browser window as small as an iPhone, I don't see the text being cut off, but I do see the problem on my iPhone simulator, so I'd like to rule out interference from the mobile plugin first. Thanks.

  7. Little Laura
    Posted 5 months ago #

    Hello Kathy,

    Sorry for the delayed response.

    Okay, I removed that extra little bit of code. I have turned off all mobile plugins (I haven't found any I liked so I just stopped using them. Maybe that's my problem?)

    What do you think? Thanks for the thought you've put into this.

  8. Hi again! I think we need to add a style to your child theme's style.css to remove the right-float on your phone number and email on small mobile devices. Could you try adding this, which will apply only to smaller screens:

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
        .topinfo {
            float: none;

    We should also add a media query around one of the earlier modifications you made to the site description/contact info line, so that it doesn't apply to small mobile devices. (Since it makes the text too big there, and your email address gets cut off.)

    Could you change this part:

    .site-description {
        font-size: 2.2rem;
        font-style: italic;

    to this:

    /* Desktops, laptops, and iPads ----------- */
    @media only screen
    and (min-width : 768px) {
       .site-description {
           font-size: 2.2rem;
           font-style: italic;

    Let me know how it goes!


You must log in to post.

About this Theme

About this Topic