Support » Themes and Templates » Blockquote alignment problem

  • Resolved lhsieh

    (@printdesignlab)


    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?

Viewing 10 replies - 1 through 10 (of 10 total)
  • esmi

    (@esmi)

    Forum Moderator

    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.

    lhsieh

    (@printdesignlab)

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

    esmi

    (@esmi)

    Forum Moderator

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

    lhsieh

    (@printdesignlab)

    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!

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

    That should fix the issue.

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

    (@printdesignlab)

    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!

    lhsieh

    (@printdesignlab)

    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%;}
    }

    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;
    }

    }

    lhsieh

    (@printdesignlab)

    My bad! Thanks for the correction.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Blockquote alignment problem’ is closed to new replies.