From 8119f58e15f19b1c669ac1edb313c546778089a5 Mon Sep 17 00:00:00 2001
From: Razvan <rciupei@yahoo.com>
Date: Thu, 15 Oct 2020 17:27:00 +0300
Subject: [PATCH 1/2] made list responsive made cards accessible

---
 src/App.css                             | 1 +
 src/components/Card-List/CardList.css   | 5 ++++-
 src/components/Card/Card.jsx            | 2 +-
 src/components/search-box/searchBox.css | 4 +++-
 src/index.css                           | 1 +
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 136dd59..43c4f3f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+
 }
 
 h1 {
diff --git a/src/components/Card-List/CardList.css b/src/components/Card-List/CardList.css
index a1a2feb..54347c2 100644
--- a/src/components/Card-List/CardList.css
+++ b/src/components/Card-List/CardList.css
@@ -1,7 +1,10 @@
 .card-list {
-    width: 85vw;
+    /* width: 85vw; */
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); 
     grid-gap: 20px;
+    grid-auto-flow: row;
+    margin: 0 2rem;
 } 
\ No newline at end of file
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index e877746..d9b0330 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -3,7 +3,7 @@ import "./Card.css";
 
 export const Card = (props) => {
   return (
-    <div className="card-container">
+    <div className="card-container" tabIndex={0}>
       <img
         alt="monster"
         src={`https://robohash.org/${props.monster.id}?set=set2&size=180x180`}
diff --git a/src/components/search-box/searchBox.css b/src/components/search-box/searchBox.css
index 21fa568..edc6bbc 100644
--- a/src/components/search-box/searchBox.css
+++ b/src/components/search-box/searchBox.css
@@ -3,7 +3,9 @@
     border: none;
     outline: none;
     padding: 10px;
-    width: 150px;
+    min-width: 150px;
     line-height: 30px;
     margin-bottom: 30px;
+    border-radius: 10px;
+    font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index f7fc149..445c434 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,7 @@ body {
     rgba(7, 27, 82, 1) 0%,
     rgba(0, 128, 128, 1) 100%
   );
+  overflow-y: scroll;
 }
 
 code {

From 88846a8e772c2bd094e235f3ab47eb4cf9af6f3d Mon Sep 17 00:00:00 2001
From: Razvan <rciupei@yahoo.com>
Date: Thu, 15 Oct 2020 17:29:27 +0300
Subject: [PATCH 2/2] removed margin

---
 src/App.css                           | 1 -
 src/components/Card-List/CardList.css | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 43c4f3f..136dd59 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,5 @@
 .App {
   text-align: center;
-
 }
 
 h1 {
diff --git a/src/components/Card-List/CardList.css b/src/components/Card-List/CardList.css
index 54347c2..8ac1dd0 100644
--- a/src/components/Card-List/CardList.css
+++ b/src/components/Card-List/CardList.css
@@ -1,10 +1,9 @@
 .card-list {
-    /* width: 85vw; */
+    width: 85vw;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); 
     grid-gap: 20px;
     grid-auto-flow: row;
-    margin: 0 2rem;
 } 
\ No newline at end of file