Dressing up blockquotes in Hemingway Rewritten

• 

  justinstimpson · Member · Jun 11, 2014 at 2:09 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m trying to figure out a reliable way to dress up my block quotes. I’d like them to have slightly wider margins than is provided automatically via the button on the text box of my page/post editor, so they’re a little more set apart.

  Having a nice over sized quotation mark would be great as well.

  I’m pretty much brand new to CSS but am a fast learner so I’m looking forward to the process!

  Thanks!

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

• 

  justinstimpson · Member · Jun 11, 2014 at 2:13 am

  • Copy link

  Sorry, I forgot to mention this last thing. When I produce a block quote via the text box in my post/page editor for some reason the alternate color it places behind the block quote extends further below the quote than it does above it. I feel like this would look a lot cleaner if it was equal above and below, is this achievable?

  I do have the Custom Design Upgrade, by the way if that helps.

• 

  kathrynwp · Staff · Jun 16, 2014 at 6:43 pm

  • Copy link

  Hi there! To add some margin to the left of the blockquote at anything bigger than phone size, and reduce the amount of padding below the blockquote, try adding this custom CSS:

  @media screen and (min-width: 480px) {
  	blockquote {
  		margin-left: 40px;
  	}
  }
  blockquote {
  	padding-bottom: 5px;
  }

  Since you’re interested in learning about CSS, here are some resources to get you started:

  An Intro to CSS: Finding CSS Selectors

  An Intro to CSS, or How to Make Things Look Like You Like

  Intro to CSS: Previewing Changes with the Matched Rule Pane

  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  More CSS basics:

  • CSS Basics
  • Editing CSS

  The first example in this tutorial shows how to add different kinds of quote marks – try exploring and see what you come up with:

  http://css-tricks.com/examples/Blockquotes/

  Have fun and just let me know if you get stuck. :-)

• 

  kathrynwp · Staff · Jun 16, 2014 at 6:45 pm

  • Copy link

  You can learn more about using media queries that target certain screen sizes here:

  http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

  Responsive Design with CSS3 Media Queries

• 

  justinstimpson · Member · Jun 30, 2014 at 7:52 pm

  • Copy link

  Thank you so much! Is there a way to duplicate the added space on the left margin to occur equally on the right margin?

• 

  kathrynwp · Staff · Jul 1, 2014 at 1:12 pm

  • Copy link

  Sure – just below this line:

  margin-left: 40px;

  add this additional line to apply margin to the right as well:

  margin-right: 40px;