media query to hide description in nav bar

client/build/containers/SiteDescription/view.js

@@ -39,9 +39,11 @@ function (_React$Component) {
   _createClass(SiteDescription, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("p", {
+      return _react.default.createElement("div", {
+        className: 'site-description'
+      }, _react.default.createElement("p", {
         className: 'text--extra-small'
-      }, this.props.siteDescription);
+      }, this.props.siteDescription));
     }
   }]);
 

client/scss/_media-queries.scss

@@ -1,9 +1,10 @@
-@media (max-width: 1120px) {
-
-  .nav-bar--center {
+@media (max-width: 1100px) {
+  // hide site description in nav bar
+  .site-description {
     display: none;
   }
 
+  // stack horizontal-splits
   .column--med-10 {
     width: 100%;
   }

client/src/containers/SiteDescription/view.jsx

@@ -3,7 +3,9 @@ import React from 'react';
 class SiteDescription extends React.Component {
   render () {
     return (
-      <p className={'text--extra-small'}>{this.props.siteDescription}</p>
+      <div className={'site-description'}>
+        <p className={'text--extra-small'}>{this.props.siteDescription}</p>
+      </div>
     );
   }
 }