From 6f74d455568a471391f0c4444f283eeae8914014 Mon Sep 17 00:00:00 2001
From: Michael Leon Putra Widhi <leonmichael463@gmail.com>
Date: Sat, 7 Oct 2023 12:07:25 +0700
Subject: [PATCH] feat : more responsive detail page
---
.../client/public/css/pages/detailProduct.css | 41 +++++++++++++++++++
1 file changed, 41 insertions(+)
diff --git a/scripts/client/public/css/pages/detailProduct.css b/scripts/client/public/css/pages/detailProduct.css
index 8b0bb44..b900947 100644
--- a/scripts/client/public/css/pages/detailProduct.css
+++ b/scripts/client/public/css/pages/detailProduct.css
@@ -11,6 +11,47 @@
column-gap: 4%;
}
+@media only screen and (max-width: 920px) {
+ .detailContainer {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ column-gap: 4%;
+ }
+
+ .detailImage {
+ width: 90% !important;
+ margin-bottom: 2rem;
+ }
+
+ #productImage {
+ width: 100% !important;
+ }
+
+ .productInfo {
+ width: 100% !important;
+ margin-bottom: 2rem;
+ }
+}
+
+@media only screen and (max-width: 480px) {
+ #productName {
+ font-size: 3rem !important;
+ margin-bottom: 0.1rem;
+ }
+}
+
+@media only screen and (max-width: 400px) {
+ #productName {
+ font-size: 2.5rem !important;
+ margin-bottom: 0.1rem;
+ }
+
+ #productPrice {
+ font-size: 1.25rem !important;
+ }
+}
+
.detailImage {
width: 38%;
border-radius: 2rem;
--
GitLab