Blockquote CSS being problematic

  • Resolved rairose

    (@rairose)


    8 years, 9 months ago

    This is the blockquote CSS I am using:

    blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #53B0D3;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #3E68A0;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:before {
    content: "\2014 \2009";
}

    These are the problems I’m having:

    1. I can’t get rid of the vertical line on the left side of my blockquote
    2. I can’t get the blockquote to center on the page
    3. Every time I try to make an edit to the blockquote CSS, my actual ” (quotation) symbol transforms into ‘201C’ and my citation text transforms into ‘20142009’

    How can I fix these obnoxious problems?

    Thank you in advance for any help and relief you can give me!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter rairose

    (@rairose)

    Here is an example of the problem: https://www.ptsdchampion.com/test-page-for-wordpress-problems/

    I can’t get rid of the vertical line on the left side of my blockquote

    Your theme is based on bootstrap framework. Bootstrap comes with some pre-made CSS styles. Your vertical line comes from the blockquote { border-left: 5px solid #eee; } in Bootstrap.

    So to resolve that, you’ll need to overwrite that line with a line of your own.

    blockquote {
    border-left: none;
}

    I can’t get the blockquote to center on the page

    In your blockquote code, change margin: 0.25em 0; to margin: 0.25em auto;

    blockquote {
    margin: 0.25em auto;
}

    Every time I try to make an edit to the blockquote CSS, my actual ” (quotation) symbol transforms into ‘201C’ and my citation text transforms into ‘20142009’

    I’m not sure why you find that strange? That’s normal behavior of CSS content, isn’t it? Try using ASCII number instead.

    Thread Starter rairose

    (@rairose)

    Thank you! It all worked except for the ascii number. It just displayed the ascii number instead of “201C”. I’ve never seen CSS do that before, which is why I found it strange. It was new to me.

    Any other suggestions for how I can get the quotation mark to appear?

    It should work with \201C (including the slash). Maybe try again with just this:

    blockquote:before {
    content: "\201C";
}
    Thread Starter rairose

    (@rairose)

    Yay! That did it! I think I was missing the ‘\’ (slash). Thanks ThePixelMe!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Blockquote CSS being problematic’ is closed to new replies.