Merge pull request #491 from hotwax/pdp-mobile-view

Fix styling for pdp mobile view
hotwax · Jan 23, 2025 · ce919fd · ce919fd
2 parents 5dc9cd0 + d78e0df
commit ce919fd
Showing 1 changed file with 11 additions and 12 deletions.
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
@@ -342,32 +342,31 @@ export default defineComponent({
   text-align: center;
 }
 
-.product-image > img {
-  width: 200px;
-}
-
 .reservation-section {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   /* gap: 5px; */
 }
 
 .product-section {
-  display: grid;
-  grid-template-columns: auto 500px;
+  display: flex;
+  flex-wrap: wrap;
   max-width: 1042px;
   margin: auto;
 }
 
+.product-image {
+  flex: 1 1 300px;
+}
+
+.product-info {
+  flex: 2 1 360px;
+}
+
 @media (min-width: 720px) {
   main {
     padding: var(--spacer-sm);
-    margin: auto;
-  }
-
-  .product-image > img {
-    width: 400px;
   }
 }
 </style>
-
+