Fix the responsiveness

kamranahmedse · Aug 31, 2018 · 2c76aab · 2c76aab
1 parent da39161
commit 2c76aab
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/filters/index.js b/src/components/filters/index.js
@@ -7,7 +7,7 @@ import './styles.css';
 import DateJumpFilter from './date-jump-filter';
 
 const Filters = (props) => (
-  <div className="filters-wrap">
+  <div className="filters-wrap mt-3 mt-sm-3 mt-md-0 mt-xl-0 mt-lg-0">
     <div className="filter-item">
       <LanguageFilter
         selectedLanguage={ props.selectedLanguage }
@@ -20,7 +20,7 @@ const Filters = (props) => (
         selectedDateJump={ props.selectedDateJump }
       />
     </div>
-    <div className="filter-item">
+    <div className="filter-item d-none d-sm-none d-md-none d-xl-block d-lg-block">
       <ViewFilter
         selectedViewType={ props.selectedViewType }
         updateViewType={ props.updateViewType }

diff --git a/src/components/top-nav/index.js b/src/components/top-nav/index.js
@@ -22,7 +22,8 @@ class TopNav extends React.Component {
             <Logo/>
             <div className="logo-text">
               <h4>GitHunt</h4>
-              <p className="text-muted">Most starred projects on GitHub</p>
+              <p className="text-muted d-none d-sm-inline-block d-md-inline-block d-xl-inline-block d-lg-inline-block">Most starred projects on GitHub</p>
+              <p className="text-muted d-inline-block d-sm-none d-md-none d-xl-none d-lg-none">Top Github Projects</p>
             </div>
           </a>
           <div className="float-right external-btns">
@@ -35,21 +36,27 @@ class TopNav extends React.Component {
                 <a href='https://goo.gl/e7YP1h'
                    target='_blank'
                    rel="noopener noreferrer"
-                   className="btn btn-danger"><i className="fa fa-chrome mr-1"></i> Use Extension</a>
+                   className="btn btn-danger d-none d-sm-none d-md-inline-block d-xl-inline-block d-lg-inline-block">
+                  <i className="fa fa-chrome mr-1"></i> Use Extension
+                </a>
               )
             }
             {
               isRunningExtension && (
                 <a href='https://twitter.com/kamranahmedse'
                    target='_blank'
                    rel="noopener noreferrer"
-                   className="btn btn-danger"><i className="fa fa-comment mr-1"></i> Give Feedback</a>
+                   className="btn btn-danger d-none d-sm-none d-md-inline-block d-xl-inline-block d-lg-inline-block">
+                  <i className="fa fa-comment mr-1"></i> Give Feedback
+                </a>
               )
             }
             <a href={ `https://twitter.com/intent/tweet?text=${this.tweet}` }
                target='_blank'
                rel="noopener noreferrer"
-               className="btn btn-primary btn-tweet"><i className="fa fa-twitter mr-1"></i> Tweet</a>
+               className="btn btn-primary btn-tweet d-none d-sm-none d-md-none d-xl-inline-block d-lg-inline-block">
+              <i className="fa fa-twitter mr-1"></i> Tweet
+            </a>
           </div>
         </div>
       </div>