reduce white space around a block quote and increase italics font – not resolved

  • Unknown's avatar
    proustmatters · Member ·

    Oh dear. In some threads a while back (which I cannot now find – I tried, honest.) I asked for help in reducing the white space before and after a block quote. And in a separate thread – increasing font of italics. I thought both matters were resolved with these snippets:
    /* reduce white space before and after blockquote */
    .entry-content blockquote {
    padding: 0 1.71rem;
    }

    and this:
    /* increase the italicized font */
    .entry-content p em {
    font-size: 19px;
    }
    But I see that neither are resolved. (sorry!)
    To see the problem, look at proustmatters>menu>Proust>Descartes and the Joyous Madeleine. Scroll down to the block quotes.
    1.) too much white space.
    2.) italics font of the block quote is small.

    My theme is Twenty Twelve with CSS customization.

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

  • eurello · Staff ·

    Hi there,

    For the padding in the blockquote bit, you have an ‘r’ in there:

    padding: 0 1.71rem;

    It should be:

    padding: 0 1.71em;

    An em is a unit of measurement; you can read about this here:
    http://en.wikipedia.org/wiki/Em_(typography)

    To increase the font-size, use: 

    .entry-content blockquote, .comment-content blockquote {
	font-size: 22px;
}

    How does that work?

  • Unknown's avatar
    proustmatters · Member ·

    My theme is Twenty Twelve with CSS
    Dear eurello.
    1) Your font size fix within a blockquote worked perfectly (I adjusted the amount to my taste.)
    2) Alas, even with your correction (removing my nasty “r”), the blockquote still has too much space around it (IMO). Ahhh, I understand now how it is set by the system: a block quote inherently begins itself with one blank line and ends itself with another blank line. Can these two be totally removed? (Since the block quote is already set off by indentation and font, there’s no need to further set it off with blank lines.) See proustmatters>menu>experiment
    3) new question: can I insert a vertical line on the left of the block quote (as is common in eMail)?
    4.) new question: can I reduce the amount of space between the lines of all text (pages and posts, block quotes)? It looks like it is now around 1 and 1/2. I would like to see what it looks like at just 1 or maybe just a little teeny bit more – if possible.
    Thanks eurello – as always.

  • Unknown's avatar
    proustmatters · Member ·

    Let me express myself a little better (I hope!) I’m just learning.
    How do I:
    2) remove the blank lines (before and after texts) that always come with a blockquote
    3) insert a vertical line immediately to the left of the blockquote
    4) reduce the line height in all the articles and block quotes. e.g. if, say, 120% is the norm for line height in my theme (Twenty Twelve with CSS), how do I change it to 110%?

  • eurello · Staff ·

    Let’s see. This bit is a little tricky:

    remove the blank lines (before and after texts) that always come with a blockquote

    You can remove the bottom space with this:

    .entry-content blockquote, .comment-content blockquote {
margin-bottom: 0em;
}

    But the top is actually the default margin bottom of the paragraph before the block quote. If you removed that, you’d be removing it for all body text paragraphs.

    insert a vertical line immediately to the left of the blockquote

    I’m not sure how to do this. But what you could do is apply a light gray (or whatever color) background to the block quotes: 

    .entry-content blockquote, .comment-content blockquote {
background: #F0F0F0;
}

    reduce the line height in all the articles and block quotes. e.g. if, say, 120% is the norm for line height in my theme (Twenty Twelve with CSS), how do I change it to 110%?

    Try: 

    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
line-height: 1.2;
}

    Then adjust the 1.2 higher or lower until it looks like you want it to.

  • Unknown's avatar
    proustmatters · Member ·

    Eurello – You always come through with excellent help. The light grey background is perfect; you understood exactly what I was trying to accomplish (even if I didn’t use the right words) and gave me a great solution when the specific one I requested seemed dorky or elusive.
    Also, the snippet for line-height is working nicely. I have to check more.

  • The topic ‘reduce white space around a block quote and increase italics font – not resolved’ is closed to new replies.