update css next prev button

.gitignore

@@ -5,7 +5,7 @@
 /node_modules
 /.pnp
 .pnp.js
-/JsonData
+../src/JsonData
 # testing
 /coverage
 

src/component/Slider.js

@@ -23,10 +23,11 @@ const Slider = () => {
   },[]);
   return (
     <div className="container">
+      
       <div className="left-btn">
         <button onClick={handlePre}>{"<"}</button>
       </div>
-      <img src={data[next]?.download_url} alt="img1"></img>
+      <img src={data[next]?.download_url} alt="image-not-found"></img>
       <div className="right-btn">
         <button onClick={handleNext}>{">"}</button>
       </div>

src/index.css

@@ -13,16 +13,32 @@ code {
 }
 img{
   width: 100%;
-  height: 500px;
+  height:auto;
 }
 
 .left-btn, .right-btn{
   position: absolute;
   top: 50%;
+  transform: translateY(300%);
 }
 .left-btn{
   left: 20px;
+  
 }
 .right-btn{
   right: 20px;
 }
+button{
+  height: 20px;
+  width: 30px;
+  background-color: rgba(0, 0, 0, 0);
+  color: black;
+  border: none;
+  font-size: 125%;
+}
+button:hover{
+  color: white;
+}
+@media (max-width: 768px) {
+   .left-btn, .right-btn { top: 40%;  } 
+  }