CSS and blockquote

  • nunoemeneves

    (@nunoemeneves)


    7 years ago

    Hi everybody,

    I am trying to format a blockquote through CSS and have been running into some trouble.

    I would like the quotation mark to be centered over the quotation itself and not centered on the page which results in overlapping with other elements.

    Any ideas?

    Thank you so much for your time

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The quote marks *are* centered on the block quote, but the whole thing is squished over because of the image floated to the left of the blockquote.

    Try changing the image from aligned left to right, and then change the CSS a bit:

    blockquote:before {
  left:0;
}

    To add CSS: use the “Additional CSS” option in the customizer. https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

    Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

    Thread Starter nunoemeneves

    (@nunoemeneves)

    Dear Steve,

    thank you so much for your reply.
    Your suggestion solves the overlapping but does not allow me to center the quotation marks over the squished text.

    Would there be any way to squish the quotation mark along with the rest of quoting?

    Thank you!

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    If you don’t have an image to either side, the current (unmodified) CSS should center the quotes.

    Thread Starter nunoemeneves

    (@nunoemeneves)

    It does.
    My problem is that the site has several users and I’m not sure they would follow the instruction for article formatting (namely, centering images)

    I was trying to come up with a way for it to work without the need for further edition after the articles were published.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    This shows it is currently centered.

    See https://cldup.com/u_UNHwGrvVr/Gs7TvV.png

    I haven’t figured out the CSS to get it to work just right when floated images are involved. Maybe someone will jump in.

    Moderator bcworkz

    (@bcworkz)

    I’m not so sure it’s even possible. Perhaps not even desirable. As a general typographic concept, it seems inappropriate to me to have a blockquote wrap around an image, unless the image is within and part of the quote. It’s just not block like ?? I would add a clear: both property to the rule to force the the blockquote to start below the image. Naturally, that would create a possibly awkward white space. If it’s undesirable, users would likely move the image insertion up (or quote down) once they see that blockquotes are indeed always blocks of text.

    That’s my take, I’m sure not everyone would agree.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS and blockquote’ is closed to new replies.