Merge pull request #427 from appfolio/responsiveAddressInput

gt - Make AddressInput responsive
appfolio · Jun 25, 2018 · fcebe49 · fcebe49
2 parents 29cbbe0 + 7c9384e
commit fcebe49
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
@@ -104,9 +104,9 @@ class AddressInput extends React.Component {
           />
         </FormLabelGroup>
         <Row className="no-gutters">
-          <Col sm={6} xs={5}>
+          <Col sm={6} xs={12} className="pr-sm-3">
             <FormLabelGroup
-              rowClassName={classnames({ 'mb-0': !showCountry })}
+              rowClassName={classnames({ 'mb-sm-0': !showCountry })}
               feedback={error.city}
               label={showLabels ? labels.city : null}
               stacked
@@ -124,7 +124,7 @@ class AddressInput extends React.Component {
               />
             </FormLabelGroup>
           </Col>
-          <Col sm={2} xs={3} className="px-3">
+          <Col sm={2} xs={4} className="pr-3">
             <FormLabelGroup
               rowClassName={classnames({ 'mb-0': !showCountry })}
               feedback={error.state}
@@ -144,7 +144,7 @@ class AddressInput extends React.Component {
               />
             </FormLabelGroup>
           </Col>
-          <Col sm={4} xs={4}>
+          <Col sm={4} xs={8}>
             <FormLabelGroup
               rowClassName={classnames({ 'mb-0': !showCountry })}
               label={showLabels ? labels.postal : null}