Support » Theme: Espied » Quotes text

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello gerard57,

    try to add div with float:left.i just made example code look it will help you

    <div style="float: left;">
    <blockquote>hello everyone this is first quote</blockquote>
    </div>
    Welcome to WordPress. This is your first post.
    Edit or delete it, then start writing!

    Hope this will helps you.

    Thanks.

    Thanks for the answer

    doesn’t work, I want the quote float into the margin embedded in the text respecting the margin of separation, like in the example:

    https://espieddemo.wordpress.com/2014/03/26/pull-quotes-example/

    And if it’s possible without the horizontal lines

    Thanks

    Hi there,

    doesn’t work, I want the quote float into the margin embedded in the text respecting the margin of separation, like in the example

    This does not require any CSS. Instead, after inserting the blockquote in your text, switch to HTML mode in the editor, find the opening <blockquote> tag, and change it to <blockquote class="alignleft">

    Update/publish the post, and that should be it.

    To remove the horizontal lines you can use this CSS:

    /* Remove horizontal lines from blockquotes */
    .page-content blockquote.alignleft, .page-content blockquote.alignright, .entry-content blockquote.alignleft, .entry-content blockquote.alignright, .entry-summary blockquote.alignleft, .entry-summary blockquote.alignright {
    	border: none;
    }

    That should prevent the lines for all pull quotes, no matter where on your site they appear.

    I would note it appears the class attribute is getting stripped out if I use the WordPress.com editor, so use the WP-Admin editor for this – I tested this using the classic editor.

    Also bringing this over from the other thread you created in https://wordpress.org/support/topic/quotes-text-2/

    When it’s responsive on mobile, the normal text that follows
    the quote text remains at the same line even if there’s only word per file and it cannot be read correctly.

    Is there any code to apply to center the quote text in this situation (narrow responsive), without leaving text of the other paragraph at the sides? (moving the text that follows it to the top or bottom)

    This should do the trick:

    /* Center pull quote on mobile screens */
    @media screen and (max-width: 37.5em) {
    	.page-content blockquote.alignleft, .page-content blockquote.alignright, .entry-content blockquote.alignleft, .entry-content blockquote.alignright, .entry-summary blockquote.alignleft, .entry-summary blockquote.alignright {
    		width: 100%;
    		text-align: center;
    	}
    }
    

    Thanks for the answers, all works except the last one, in mobile device still appears the cutted text by the side of the quote, I want the quote centered without leaving space by the sides and the text that follows stayed up or down. Is there any other CSS to apply for this case?

    That code works exactly as it should for me on mobile:

    https://cldup.com/MWYXvkgnBP-2000×2000.png

    Exact same post on desktop:

    https://cldup.com/u5rfjoBLyR-2000×2000.png

    So if it’s not working on your site, it means it’s something specific to your site that’s preventing it. In that case I’m afraid there’s not much more I can do without seeing your site or knowing what other additional CSS you’ve already added to it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.