WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Blockquote alignment problem (11 posts)

  1. printdesignlab
    Member
    Posted 6 months ago #

    Hello! I am currently using twenty fourteen template and it's all great so far. However, I am struggling with blockquote alignment. Ever since I switched the content width from 474 to 700px, the blockquote doesn't work properly anymore and I really want the width to be 700px on the page.

    See what I mean here:
    Screenshot 1 and Screenshot 2

    Any suggestions on how I could fix this?

  2. esmi
    Forum Moderator
    Posted 6 months ago #

    Do not edit the Twenty Fourteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

  3. printdesignlab
    Member
    Posted 6 months ago #

    Hi esmi,
    I AM currently using a child theme to edit. I just don't know how to fix the blockquote alignment issue.

  4. esmi
    Forum Moderator
    Posted 6 months ago #

    Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance. :-)

  5. printdesignlab
    Member
    Posted 6 months ago #

    Oops! link here:
    printdesignlab.luciahsieh.com
    The blockquotes alighment work fine when it's in a smaller screen, but when it goes to full screen, it goes out of place.

    Thanks for your help!

  6. Nhat
    Member
    Posted 6 months ago #

    @media screen and (min-width: 1260px) {
    .site-content blockquote.alignleft, .site-content blockquote.alignright { margin-right: -12%; }
    }

    That should fix the issue.

  7. batharoy
    Member
    Posted 6 months ago #

    @media screen and (min-width: 1260px) {
        .site-content blockquote.alignright {
            margin-right: 0;
    
    }
  8. printdesignlab
    Member
    Posted 6 months ago #

    WOOHOO!! Issue solved!

    In the end, I took batharoy's code and added a block left alignment too:

    /*Fix blockquote alignment issue*/
    @media screen and (min-width: 1260px)
        .site-content blockquote.alignright {
            margin-right: 0;
    }
    
    @media screen and (min-width: 1260px)
        .site-content blockquote.alignleft {
            margin-left: 0;
    }

    Thanks guys!

  9. printdesignlab
    Member
    Posted 6 months ago #

    Actually, Nhat's works too! I like this one better actually because it indents a little bit out which makes it more appealing. However, it's based on user's preference.

    @media screen and (min-width: 1260px) {
    .site-content blockquote.alignright { margin-right: -12%; }
    .site-content blockquote.alignleft {margin-left:-12%;}
    }
  10. batharoy
    Member
    Posted 6 months ago #

    No need to call the @media twice.
    You can nest the selectors

    @media screen and (min-width: 1260px) {
    .site-content blockquote.alignright {
    margin-right: 0;
    }
    .site-content blockquote.alignleft {
    margin-left: 0;
    }

    }

  11. printdesignlab
    Member
    Posted 6 months ago #

    My bad! Thanks for the correction.

Reply

You must log in to post.

About this Topic