Blockquote Formatting

• 

  stevenaquino · Member · Dec 29, 2011 at 3:09 am

  • Copy link
  • Add topic to favorites

  How can I get the vertical line to match the text? Right now it’s 1-2″ longer than the body of the text. I want to shorten the line so they match. The theme I’m using is Minimum.

  Thanks in advance for any help!

  Steven

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

• 

  thesacredpath · Member · Dec 29, 2011 at 3:25 am

  • Copy link

  The site linked to your username, http://stevenaquino.wordpress.com/ , has been deleted. We need a link to the site you are talking about, and hopefully a link to where an example of this is showing.

• 

  stevenaquino · Member · Dec 29, 2011 at 3:29 am

  • Copy link

  Sorry about that. Here’s the link to my site which features an example:

  http://stevensblog.org/2011/12/19/quote-of-the-day-6/

  Thanks for the heads-up.

  Steven

• 

  thesacredpath · Member · Dec 29, 2011 at 3:40 am

  • Copy link

  Play with the top and bottom padding here. The order is top, right, bottom, left.

  blockquote {
  padding: 25px 30px 5px 70px;
  }

  Some of the bottom padding is from the fact that paragraphs nested in the blockquote so the paragraph bottom margin is responsible for the bulk of the extension at the bottom.

• 

  stevenaquino · Member · Dec 29, 2011 at 3:51 am

  • Copy link

  I appreciate the help. Thanks!

  I copy & pasted what you posted into my CSS. Looks better, but not quite what I’d like.

  I’d like something like this:

  http://daringfireball.net/linked/2011/12/27/way-too-late

  See how Gruber’s block quote matches the text perfectly and the line is snug? That’s the aesthetic I’m aiming for. :)

  Steven

• 

  thesacredpath · Member · Dec 29, 2011 at 4:09 am

  • Copy link

  I gotta go and finish up some stuff for a client, but this is sort of copying what was on the site you reference. See what this does for you. I probably won’t be back for a couple hours.

  blockquote {
      margin: 0 3em 0 0;
      padding: 0 0.75em 0 1em;
  }
  
  blockquote p {
      margin: 0 0 1em;
  }
  
  .entry-content p, .page .entry-content p {
      padding: 0 0 10px;
  }