Blockquote alignment problem

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.

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

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

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;

}

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!

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

My bad! Thanks for the correction.