Fix margin for right-aligned images (#398)

Update so imageAlign* has a class for all directions
This commit is contained in:
Rick Hanlon II 2018-01-17 22:04:03 -05:00 committed by Joel Marcey
parent 373a3e62de
commit 4c2558e8bd
2 changed files with 9 additions and 2 deletions

View file

@ -16,11 +16,13 @@ class GridBlock extends React.Component {
alignCenter: this.props.align === 'center',
alignRight: this.props.align === 'right',
fourByGridBlock: this.props.layout === 'fourColumn',
imageAlignBottom: block.image && block.imageAlign === 'bottom',
imageAlignSide:
block.image &&
(block.imageAlign === 'left' || block.imageAlign === 'right'),
imageAlignTop: block.image && block.imageAlign === 'top',
imageAlignRight: block.image && block.imageAlign === 'right',
imageAlignBottom: block.image && block.imageAlign === 'bottom',
imageAlignLeft: block.image && block.imageAlign === 'left',
threeByGridBlock: this.props.layout === 'threeColumn',
twoByGridBlock: this.props.layout === 'twoColumn',
});

View file

@ -795,7 +795,6 @@ pre code {
.imageAlignSide .blockImage {
max-width: 500px;
flex: 0 1 500px;
margin-right: 40px;
}
@media only screen and (min-device-width: 360px) and (max-device-width: 735px) {
.imageAlignSide .blockImage {
@ -821,6 +820,12 @@ pre code {
margin-left: auto;
margin-right: auto;
}
.imageAlignRight .blockImage {
margin-left: 40px;
}
.imageAlignLeft .blockImage {
margin-right: 40px;
}
.container .gridBlock .blockContent p {
padding: 0;
}