element aligned to the right also inrease its size

akbarsazish · Aug 4, 2023 · 2230b2c · 2230b2c
1 parent f656c53
commit 2230b2c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/Book.js b/src/components/Book.js
@@ -30,7 +30,7 @@ const BookInfo = ({ book }) => {
             <div className="circle">
             </div>
             <div className="percentage">
-              <p className="competion-percentage"> 80 % </p> 
+              <p className="competion-percentage"> 64 % </p> 
               <p className="completed"> completed </p>
             </div>
           </div>

diff --git a/src/components/assets/style.css b/src/components/assets/style.css
@@ -152,13 +152,14 @@ button {
 
 .competion-percentage {
   margin: 12px 2px 2px 22px;
-  font-size: 22px;
+  font-size: 2rem;
   font-weight: bold;
 }
 
 .completed {
   margin: 2px 22px;
   color: gray;
+  font-size: 0.87rem;
 }
 
 .book-item {
@@ -176,6 +177,7 @@ button {
 .book-improvment {
   display: flex;
   padding: 10px 5px;
+  float: right;
 }
 
 .book-category {
@@ -216,8 +218,8 @@ ul {
 
 .circle {
   position: relative;
-  width: 4.25rem;
-  height: 4.25rem;
+  width: 5rem;
+  height: 5rem;
   border-radius: 50%;
   background: conic-gradient(#2c88d9 230deg, rgb(18, 18, 18, 0.1) 0deg);
   display: flex;
@@ -228,8 +230,8 @@ ul {
 .circle::before {
   content: '';
   position: absolute;
-  height: 3.7rem;
-  width: 3.7rem;
+  height: 4.3rem;
+  width: 4.3rem;
   border-radius: 50%;
   background-color: #fff;
 }