fix: layout shift after first search

freeCodeCamp · Nov 20, 2023 · edd4277 · edd4277
1 parent a8b5e4a
commit edd4277
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/apps/pokemon-search-app/index.html b/apps/pokemon-search-app/index.html
@@ -30,7 +30,7 @@ <h1>Pokémon Search App</h1>
             <span id="weight"></span>
             <span id="height"></span>
           </div>
-          <img src alt id="sprite" />
+          <div class="sprite-container"><img alt id="sprite" /></div>
           <div id="types"></div>
         </div>
         <div class="bottom-container">

diff --git a/apps/pokemon-search-app/public/styles.css b/apps/pokemon-search-app/public/styles.css
@@ -114,10 +114,15 @@ label {
   font-size: 0.85rem;
 }
 
+.sprite-container {
+  flex-grow: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 #sprite {
-  margin: 20px 0;
   width: 180px;
-  align-self: center;
 }
 
 #types {