How do I make a WordPress blockquote appear on the left side of the page instead of the right?

1 Views

I’ve very new at this. I appreciate any help I can get with this. I haven’t found an answer on the internet yet. (At least, not one I understand!)

When I use blockquote in WordPress, it shows up on the right side of the screen. Sometimes, I want it to appear on the left side of the screen. How do I do that? Here is the blockquote (below) I’d like to have on the left side of the screen. It currently appears on the right side of the screen.

Read More

<blockquote><p>Living a better life is less about things and more about being thankful.</p></blockquote>"

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. As the respected members said above, also if you have a plugin such as firebug on firefox or in your chrome browser, right click the blockquote and choose “inspect element”. Then you will see all the rules(i.e effects) applied to that element and you can show/hide them to see their effect on the element which will give you a better understanding of what the rules are doing to your element.

    Cheers.

  2. <blockquote style="text-align:left;">Test</blockquote>

    This will change it on a quote-by-quote basis.

    A better solution is to open your theme’s style.css file, search for blockquote, and replace the text-align:right; with text-align:left;. This will change the behavior or a blockquote site-wide.

  3. What happens if you wrap up the blockquote element in it’s own div element? Such as this:

        <div>
       <blockquote>
           <p>Living a better life is less about things and more about being thankful.</p>
       </blockquote>
    </div>

    You would then possibly be able to control the blockquote as a div block element using float:left, setting the width larger so that it gets moved below any elements to it’s left, or using other means of absolutely positioning it.

  4. For the theme that I am using, Twenty Fourteen, the correct answer would be to use:

    <blockquote class="alignleft">This is my quote</blockquote>

    I found this by using the Chrome devtools to inspect the example on the demo. Since this theme has a special class with nice formatting for the aligned blockquotes it is better to use this than to override the CSS with style settings. Note that while inspecting the element you get direct links into the CSS that can be used to check which other classes the theme has – quite useful! You may need to read a bit about CSS syntax to interpret it though.