From a2ff301f57f04d60ca69556fdbcf5e184ca47f06 Mon Sep 17 00:00:00 2001
From: SkymelTheo <erigoni.t@gmail.com>
Date: Mon, 24 Feb 2025 16:48:12 +0100
Subject: [PATCH] fleche, responsive, styles

---
 src/components/marvel-characters.jsx |  2 +-
 src/style/card.scss                  |  5 ++---
 src/style/marvel-characters.scss     | 10 +++++-----
 src/style/profile-page.scss          |  5 +++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/marvel-characters.jsx b/src/components/marvel-characters.jsx
index 74498f3..957495e 100644
--- a/src/components/marvel-characters.jsx
+++ b/src/components/marvel-characters.jsx
@@ -13,7 +13,7 @@ export default function MarvelCharacters({ addToFavorites }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comics, setComics] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
-  const charactersPerPage = 15;
+  const charactersPerPage = 20;
 
   useEffect(() => {
     const apiComics = `https://gateway.marvel.com/v1/public/characters?apikey=${publicKey}&limit=100&offset=0`;
diff --git a/src/style/card.scss b/src/style/card.scss
index 022947e..b620068 100644
--- a/src/style/card.scss
+++ b/src/style/card.scss
@@ -142,9 +142,8 @@
       border-radius: 8px;
       padding: 15px;
       img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+        width: 150px;
+        height: 150px;
         margin-left: -1px;
         border: solid 4.5px $text-color;
         margin-top: -10px;
diff --git a/src/style/marvel-characters.scss b/src/style/marvel-characters.scss
index 5aac5f2..4df7aed 100644
--- a/src/style/marvel-characters.scss
+++ b/src/style/marvel-characters.scss
@@ -11,7 +11,7 @@
     background-color: $primary-color;
     position: absolute;
     margin-left: 88%;
-    margin-top: 30%;
+    margin-top: 43%;
     width: 3%;
     border: none;
     color: $text-color;
@@ -25,7 +25,7 @@
     background-color: $primary-color;
     position: absolute;
     margin-left: 5%;
-    margin-top: 30%;
+    margin-top: 43%;
     width: 3%;
     border: none;
     color: $text-color;
@@ -47,7 +47,7 @@
       color: $text-color;
       cursor: pointer;
       margin-left: 65%;
-      margin-top: 530%;
+      margin-top: 661%;
     }
     .btn-left {
       border-radius: 50%;
@@ -60,8 +60,8 @@
       border: none;
       color: $text-color;
       cursor: pointer;
-      margin-left: 35%;
-      margin-top: 530%;
+      margin-left: 27%;
+      margin-top: 661%;
     }
   }
 }
diff --git a/src/style/profile-page.scss b/src/style/profile-page.scss
index ea88219..b45a9a0 100644
--- a/src/style/profile-page.scss
+++ b/src/style/profile-page.scss
@@ -9,11 +9,12 @@
     .character-content {
       .present {
         display: flex;
-        margin-top: 10%;
+        margin-top: 5%;
         .image-containe {
           img {
-            width: 340px;
+            width: 300px;
             margin: 1% 0;
+            height: 300px;
             border-radius: 2%;
             margin-top: 7%;
           }