hide bottom nav on mobile

Author: chrisminnick

reactjsfoundations.com/public/index.html

@@ -102,7 +102,24 @@
         width: 50px;
         padding: 8px;
       }
+      .blog__title {
+        text-align: center;
+        color: #fff;
+        background-color: #000;
+        padding: 8px;
+      }
+      .blog__posts {
+        text-align: left;
+        border: 1px solid #999;
+        padding: 8px;
+      }
+      .post__title {
+        color: #333;
+      }
 
+      .post__content {
+        color: #333;
+      }
       @media only screen and (max-width: 480px) {
         .container {
           display: block;

reactjsfoundations.com/src/WpBlog.js

@@ -1,6 +1,5 @@
 import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import { useState } from 'react';
-import styles from './wp-blog.module.css';
 import { useParams } from 'react-router-dom';
 
 const queryClient = new QueryClient();
@@ -54,8 +53,8 @@ function ReactBlog(props) {
     return <div>Loading...</div>;
   }
   return (
-    <div className={styles.blog__posts}>
-      <h2 className={styles.blog__title}>{props.title}</h2>
+    <div className="blog__posts">
+      <h2 className="blog__title">{props.title}</h2>
       <div style={{ textAlign: 'center' }}>
         {page > 1 && <button onClick={handlePrevPage}>Newer posts</button>}{' '}
         {page + 1 <= totalPages && (
@@ -66,13 +65,13 @@ function ReactBlog(props) {
         <div key={post.id}>
           <h2>
             <section
-              className={styles.post__title}
+              className="post__title"
               dangerouslySetInnerHTML={{ __html: post.title.rendered }}
             />
           </h2>
 
           <section
-            className={styles.post__content}
+            className="post__content"
             dangerouslySetInnerHTML={{ __html: post.content.rendered }}
           />
 

reactjsfoundations.com/src/WpBlogSP.js

@@ -22,11 +22,11 @@ export default function ReactBlog(props) {
 
   if (post) {
     return (
-      <div className={styles.blog__posts}>
-        <h1 className={styles.blog__title}>{post.title.rendered}</h1>
+      <div className="blog__posts">
+        <h1 className="blog__title">{post.title.rendered}</h1>
         <div key={post.id}>
           <section
-            className={styles.post__content}
+            className="post__content"
             dangerouslySetInnerHTML={{ __html: post.content.rendered }}
           />
         </div>