change size of top header text

• 

  threeleaf13 · Member · Mar 31, 2017 at 3:19 am

  • Copy link
  • Add topic to favorites

  Very new to CSS…wp chat suggested I ask here if someone has CSS to change the size of the top header text on the right and then center the phone number underneath. thanks in advance for any assistance.

  The blog I need help with is: (visible only to logged in users)

• 

  rambogenius · Member · Mar 31, 2017 at 9:27 am

  • Copy link

  Hi @threeleaf13,

  Your site is private and I cannot view it to help you out.

  Thanks

• 

  otpidusprime · Member · Apr 2, 2017 at 8:52 am

  • Copy link

  Hello @threeleaf13,
  You site is in private mode and so i cannot view it an give you the exact code to do what you are looking for.

  But here’s the basic idea,
  To change the size of the header text, use the font-size CSS property.
  FOR EXAMPLE:
  Consider there’s a header text with this following HTML code:
  <header>HEADER TEXT</header>
  You can change the size of the header text using the following CSS code:

  header {
      font-size: 35px;
      font-weight: bold;   // makes the header text bold
  }

  And to move the phone number to the center, you can use the text-align CSS property if it is inside a block element:
  FOR EXAMPLE:
  Consider there’s a phone number text with the following HTML code:
  <div class="phone">+1 2345 6789</div>
  You can center this text using the following CSS code:

  .phone {
      display: block;   // block element
      text-align: center;
  }

  Let me know if this helps.

• 

  threeleaf13 · Member · Apr 2, 2017 at 11:34 am

  • Copy link

  Hi otpidusprime,
  As best as I can figure, this is the code from the developer tools for that top header. I’m trying to figure it out, but not having any luck….can you help with what I’ve provided?
  THREE LEAF LANDSCAPING, LLC
  Bringing Quality Outdoors
  860-283-5690
  That’s what I would like it to look like…maybe the font a little bigger for Three leaf…..
  Thanks so much for any help you can provide…

  <div class=”site-top-content”>
  <span class=”site-top-content-1″ style=”
  color: #f1f1f1;
  “>Three Leaf Landscaping
  </span><span class=”site-top-content-2″>Bringing Quality Outdoors
  860-283-5690
  </span> </div>

• 

  threeleaf13 · Member · Apr 2, 2017 at 11:35 am

  • Copy link

  well it moved the THREE LEAF……to the left when I submitted it and aligned it, so that’s not really what I want it to look like.

• 

  otpidusprime · Member · Apr 2, 2017 at 12:24 pm

  • Copy link

  Okay, based on the code you gave… this should work, perhaps.
  Change the size of the top header text:

  .site-top-content-1 {
     font-size: 24px;
  }

  Bring the phone number to the center:

  .site-top-content-2 {
     display: block;
     text-align: center;
  }

  Let me know if this works.