Styling updated for small devices

random-quote-machine/public/index.html

@@ -36,5 +36,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
   </body>
 </html>

random-quote-machine/src/App.js

@@ -57,14 +57,14 @@ class App extends React.Component {
               </p>
               <div className="row justify-content-center">
                 <button
-                  className={`btn col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
+                  className={`btn col-10 mb-2 mb-sm-0 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
                   id="new-quote"
                   onClick={this.handleNewQuote}
                 >
                   <FontAwesomeIcon icon={faShuffle} /> Random Quote
                 </button>
                 <a
-                  className="btn bg-color-twitter col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-1"
+                  className="btn bg-color-twitter col-10 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-sm-1"
                   href={`https://twitter.com/intent/tweet?text="${encodeURI(
                     `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
                   )}&hashtags=quotes,freeCodeCamp`}