Control Heading Sizes

• 

  cynthiakirk · Member · Jan 16, 2014 at 10:25 am

  • Copy link
  • Add topic to favorites

  I’m trying to get a main head (WINE & SPIRITS PACKAGING EXPERTS) and then a smaller subhead (We integrate creativity, strategy and technology). Can you help me control the size of the subhead. I’m finding the text editor doesn’t have any precise controls over the Heading size.

  Also, when I do a hard return it puts too much space between the two. Is there CSS code I can use to override this?

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

• 

  a1jesin · Member · Jan 16, 2014 at 3:00 pm

  • Copy link

  Use this code in the CSS editor

  .main-content h2 {
      font-size: 18px;
  }
  .main-content h2 span {
      font-size: 32px;
  }

  Experiment with different font sizes.

• 

  cynthiakirk · Member · Jan 16, 2014 at 11:27 pm

  • Copy link

  Thanks, that did it!

• 

  justpi · Member · Jan 16, 2014 at 11:42 pm

  • Copy link

  By the way, when you have the upgrade you don’t need to add style for color in the Text editor: you could remove it from your span tag and add it to the code a1jesin suggested.
  An alternative to the HTML you used would be to mark the first phrase as an h2 and the second one as an h3: then you wouldn’t need the span tag at all, and you wouldn’t need the br tag either.

  As for decreasing the space after paragraphs (and other elements), add this and decrease the value:

  ul, ol, dl, p, details, address, .vcard, figure, pre, fieldset, table, dt, dd, hr {
  margin-bottom: 1.22222rem;
  }

• 

  cynthiakirk · Member · Jan 17, 2014 at 8:09 am

  • Copy link

  Thanks! Can you help me with something else. I notice that the text in my text boxes is showing up different sizes in different browsers. Is there a way to link the size of the box to the size of the text? In Chrome and Safari I’m seeing a lot of white space below, but in Firefox the text goes down below the bottom of the boxes.

• 

  a1jesin · Member · Jan 17, 2014 at 9:43 am

  • Copy link

  On which page is this happening? I viewed the contact page on both Firefox 26 & Chrome 32 and don’t see anything different.

• 

  designsimply · Member · Jan 23, 2014 at 11:37 pm

  • Copy link

  I tested http://packagenv.com/ in Chrome 32.0.1700.77, Firefox 26.0, and Safari 7.0.1 on Mac OS X 10.9.1 (Mavericks) and the font size as well as the spacing below the text in the boxes on the home page all looked the same to me.

  If you’re seeing something different in another browser, it could be because you’ve changed the browser zoom settings or because the browser window size is different.

  That said, you can link the box size to the text size. To do that, you’d use em instead of px. For example, in the rule for “.box1, .box2, .box3” change the height from 220px to 11em.

• 

  cynthiakirk · Member · Jan 24, 2014 at 4:15 am

  • Copy link

  Thanks, I will try that! I wondered what the em designation was for.

• 

  hfzrhmn · Member · Jan 24, 2014 at 4:43 am

  • Copy link

  em is a unit of measurement in CSS. More details here:

  px – em – % – pt – keyword