wdw

src/components/home-page/home-page-resources/about.css

@@ -250,3 +250,10 @@
     height: 280px;
   }
 }
+
+@media (max-width: 768px) {
+  .right-section,
+  .about-image {
+    display: none;
+  }
+}

src/components/home-page/home-page-resources/about.js

@@ -1,36 +1,58 @@
-import { Link } from 'react-router-dom';
-import './about.css';
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import "./about.css";
 
 function About() {
+  const [markerVisible, setMarkerVisible] = useState(false);
+
+  const handleMapClick = () => {
+    setMarkerVisible(true);
+  };
+
   return (
     <section className="about-section">
       <div className="about-container">
         <div className="about-content">
-          <div className='about-text-area'>
-              <h2>About Us</h2>
+          <div className="about-text-area">
+            <h2>About Us</h2>
             <p>
-              Good Old Katy is a resource hub and center for all things Houston and Katy texas. We demonstrate the many opportunities and resources of over 600 square miles of texan land. Our mission is to display the rich history of Katy and offer our aid to all of its inhabitants.
+              Good Old Katy is a resource hub and center for all things Houston
+              and Katy texas. We demonstrate the many opportunities and
+              resources of over 600 square miles of texan land. Our mission is
+              to display the rich history of Katy and offer our aid to all of
+              its inhabitants.
             </p>
-
           </div>
         </div>
+
         <div className="about-image">
-          <img src={`${process.env.PUBLIC_URL}/images/texas.svg`} alt="Katy Community" />
-          <img className="katy-marker"src={`${process.env.PUBLIC_URL}/images/katypin.svg`} alt="Community" />
+          <img
+            src={`${process.env.PUBLIC_URL}/images/texas.svg`}
+            alt="Katy Community"
+            onClick={handleMapClick}
+            style={{ cursor: "pointer" }}
+          />
+
+          <img
+            className="katy-marker"
+            src={`${process.env.PUBLIC_URL}/images/katypin.svg`}
+            alt="Community"
+            style={{ opacity: markerVisible ? 1 : 0 }}
+          />
         </div>
-        <div className='right-section'>
-          <div className="katy-locate">
-            Can you find where Katy is located?
-          </div>
-
-          <div className='katy-link'>
-            <Link to="/map"className='plink'>
-            See Katy Map
-            </Link>
-            <img src={`${process.env.PUBLIC_URL}/images/right-arrow.svg`} alt='right arrow' />
-          </div>
+
+        <div className="right-section">
+          <div className="katy-locate">Can you find where Katy is located?</div>
+          <Link to="/map" className="plink">
+            <div className="katy-link">
+              See Katy Map
+              <img
+                src={`${process.env.PUBLIC_URL}/images/right-arrow.svg`}
+                alt="right arrow"
+              />
+            </div>
+          </Link>
         </div>
-
       </div>
     </section>
   );

src/components/home-page/home-page-resources/featured.css

@@ -66,10 +66,11 @@
 
 }
 .polaroid-holder{
-    display: flex;
-    justify-content: end;
-    transform: rotate(-7deg);
-    margin-top: 20px;
+  display: flex;
+	cursor: pointer;
+  justify-content: end;
+  transform: rotate(-7deg);
+  margin-top: 20px;
 }
 
 .text-section{
@@ -152,6 +153,7 @@
   .polaroid-holder {
     justify-content: center;
     transform: rotate(-4deg);
+		cursor: pointer;
   }
 
   .text-header-please {

src/components/home-page/navBar.css

@@ -10,6 +10,8 @@
 }
 
 .nav-bar-container {
+  z-index: 1000;
+
   display: flex;
   align-items: center;
   justify-content: space-between;

src/components/map/Map.css

@@ -26,14 +26,30 @@
   border-radius: 3px;
   overflow: hidden;
   box-shadow: 2px 3px rgba(0, 0, 0, 1);
-  min-width: 0;
+  min-width: 80%;
   background: rgba(254, 250, 224, 1);
 }
 
 .map-wrapper .leaflet-container {
   border-radius: 0;
 }
 
+.leaflet-container {
+	touch-action: pan-x pan-y;
+}
+
+@media (max-width: 968px) {
+	.map-wrapper {
+		min-height: 400px;
+		height: 50vh;
+		min-width: 100%;
+	}
+
+	.map-wrapper .leaflet-container {
+		height: 100% !important;
+	}
+}
+
 .resources-sidebar {
   width: 350px;
   min-width: 300px;
@@ -45,6 +61,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+	-webkit-overflow-scrolling: touch;
 }
 
 .sidebar-header {
@@ -270,4 +287,8 @@
 
 .popup-content strong {
   color: var(--text-main);
-}
+}
+
+.leaflet-control-zoom {
+	display: none;
+}

src/components/map/Map.js

@@ -134,6 +134,10 @@ function Map() {
             zoom={13}
             style={{ height: "70vh", minHeight: "420px", width: "100%" }}
             scrollWheelZoom={true}
+            tap={true}
+            touchZoom={true}
+            dragging={true}
+            zoomControl={true}
           >
             <MapEventHandler
               onBoundsChange={handleBoundsChange}