mobile responsive layout complete

MahdiMajdian · May 25, 2021 · 5e58783 · 5e58783
1 parent bd7e83a
commit 5e58783
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -23,18 +23,18 @@
 					<div class="col-12 p-0">
 						<div class="row d-flex no-gutters justify-content-center">
 							<div class="col-12 text-center mt-4 pop-title" id="fff">Spicy Rote Pasta and Cheese</div>
-							<div class="col-4 text-center p-4"><span class="pop-price">139.01</span><span style="color: #b3ffb0">$</span></div>
-							<div class="col-4 text-center p-4"><span class="pop-rate">4.6</span> <i class="fa fa-star" style="color: #fff068"></i></div>
-							<div class="col-12 px-5 pt-4">
+							<div class="col-5 text-center p-1 p-md-4"><span class="pop-price">139.01</span><span style="color: #b3ffb0">$</span></div>
+							<div class="col-5 text-center p-1 p-md-4"><span class="pop-rate">4.6</span> <i class="fa fa-star" style="color: #fff068"></i></div>
+							<div class="col-12 px-3 pt-2 px-md-5 pt-md-4">
 								<div class="row no-gutters">
-									<div class="col-6">
-										<div class="qt rounded-pill d-flex justify-content-around">
+									<div class="col-md-6 col-12 d-flex justify-content-center">
+										<div class="popup__count rounded-pill d-flex justify-content-around">
 											<i class="fa fa-minus text-white pop-minus" id="pop-minus"></i>
 											<p class="m-0 my-auto pop-count">2</p>
 											<i class="fa fa-plus text-white pop-plus" onclick="pop"></i>
 										</div>
 									</div>
-									<div class="col-6 my-auto text-right">Total: <span class="pop-total"></span><span style="color: #b3ffb0">$</span></div>
+									<div class="col-md-6 col-12 d-flex justify-content-center my-auto text-right">Total: <span class="pop-total"></span><span style="color: #b3ffb0">$</span></div>
 								</div>
 							</div>
 						</div>

diff --git a/style.css b/style.css
@@ -44,8 +44,8 @@ body {
 	height: 100%;
 	width: 18rem;
 	left: 50%;
-	transform: translateX(-50%);
 	top: 3rem;
+	transform: translateX(-50%);
 	background: url(assets/header-img.png) no-repeat;
 	background-position: center;
 	background-size: contain;
@@ -160,12 +160,15 @@ body {
 .content {
 	position: absolute;
 	top: 10rem;
-	right: 19rem;
+	right: 20rem;
 	left: 0rem;
 	bottom: 0;
 	overflow-y: scroll;
 	overflow-x: hidden;
 }
+.content::-webkit-scrollbar{
+	display: none;
+}
 .flex {
 	display: flex;
 	justify-content: center;
@@ -344,44 +347,61 @@ body {
 	.header-img {
 		width: 14rem;
 	}
+	.header-p1 {
+		font-size: 2.4rem;
+	}
+	.header-p2 {
+		font-size: 2.4rem;
+	}
+}
+@media screen and (max-width: 1100px) {
 	.header-p1 {
 		font-size: 1.5rem;
 	}
 	.header-p2 {
 		font-size: 1.5rem;
 	}
+	.header-content {
+		width: 100%;
+	}
 }
 @media screen and (max-width: 768px) {
+	.header {
+		height: 10rem;
+	}
 	.header-content {
 		width: 100%;
 	}
 	.header-img {
 		width: 12rem;
+		top: 0rem;
+		transform: translateX(-50%);
 	}
 	.header-p1 {
 		font-size: 1.5rem;
 		right: calc(50% + 5rem);
+		top: 25%;
 	}
 	.header-p2 {
 		font-size: 1.5rem;
 		left: calc(50% + 5rem);
+		top: 25%;
 	}
-
 	.content {
-		top: 10rem;
+		top: 5rem;
 		right: 0;
 		left: 0;
-		bottom: 0;
+		bottom: 15vh;
 		overflow-x: hidden;
-
 	}
 
 	.panel {
 		width: 100%;
 		position: absolute;
-		top: calc(100vh + 10rem);
-		height: calc(100vh - 10rem);
+		top: 85vh;
 		right: 0;
+		height: auto;
+
 	}
 	.details-box {
 		width: 75%;
@@ -398,27 +418,19 @@ body {
 	}
 }
 @media screen and (max-width: 500px) {
-
 	.header-img {
 		width: 8rem;
 	}
-
-	.content {
-		top: 10rem;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		overflow-x: hidden;
-
+	.popup__order img {
+		width: 10rem;
+		height: 10rem;
 	}
-
-	.panel {
-		width: 100%;
-		position: absolute;
-		top: 100vh;
-		height: calc(100vh - 10rem);
-		right: 0;
+	.popup__order {
+		font-size: 1.5rem;
 	}
+
+
+
 	.details-box {
 		width: 75%;
 		margin: 1rem;
@@ -429,9 +441,7 @@ body {
 		width: 75%;
 	}
 	.header-overlay {
-
-		border-radius:0;
-
+		border-radius: 0;
 	}
 	.box {
 		width: 100%;