Reducing size of text box on home page of Motif theme

• 

  lamodeculture · Member · Jul 27, 2014 at 2:11 pm

  • Copy link
  • Add topic to favorites

  Hi there,
  How can you reduce the size of the text box on the motif theme?
  I would also like to know how to remove the text box and just leave the smaller inner box there.
  Thanks,
  Jane

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

• 

  francisbob · Member · Jul 27, 2014 at 5:35 pm

  • Copy link

  Is this what you want to do ?

  

• 

  lamodeculture · Member · Jul 27, 2014 at 7:01 pm

  • Copy link

  Hi.
  Thanks for replying. What I want to do is reduce the size of the box on the home page. The one that says ‘an alternative city guide..’
  Thanks,
  Jane

• 

  francisbob · Member · Jul 27, 2014 at 7:14 pm

  • Copy link

  Try this !

  #post-50 > div > h1{
     font-size:20px;
     margin:0px;
  }
  #post-50 > .entry-header{
     padding:0;
  }

  Tell me how it goes, if you find the text to be too small, you can change the font-size parameter by yourself !

• 

  lamodeculture · Member · Jul 27, 2014 at 7:27 pm

  • Copy link

  Thanks for that. That’s better but is there anyway to make even space over and under the text? At the moment underneath the text is bigger than over the text.
  Thanks again,
  Jane

• 

  lamodeculture · Member · Jul 27, 2014 at 7:37 pm

  • Copy link

  Oh it just changed! The box is perfect size.
  Thanks a million for that!
  And I have one last question if that’s okay.
  Is there anyway to make the box disappear and just have the text
  by itself?
  All the best,
  Jane

• 

  francisbob · Member · Jul 27, 2014 at 7:49 pm

  • Copy link

  Lol ok, you scared me, because there is a 2px difference between top and down, I was wondering how you saw it :P

  For the background, text will be hard to read if you remove the white box. You can try one of these three solutions :

  1- Semi-transparent white background :

  #post-50{
     background:rgba(255,255,255,0.4);
  }

  2- No background :

  #post-50{
     background:transparent;
  }

  3- No background, white colored text (and a wee bit bolder) :

  #post-50{
     background:transparent;
  }
  
  #post-50 > div > h1 > span{
     color:#fff;
     font-weight:600;
  }

  If you want the last one, you’ll need to remove the formatting on your home page (Page -> Edit)