support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-07-02 06:13:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: product comparison mobile layout
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-09-10 04:05:36 -07:00
parent 6a763bbfda
commit 6c817cbd20
2 changed files with 119 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

58
product-comparison.html
View file

@ -15,6 +15,13 @@
display: flex !important;
}
}
/* Prevent horizontal scroll on mobile */
@media (max-width: 639px) {
html,
body {
overflow-x: hidden;
}
}
</style>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
@ -269,9 +276,11 @@
<!-- Product Selection Section -->
<section class="bg-white py-12">
<div class="max-w-7xl mx-auto px-5">
<div class="flex items-center justify-between gap-8">
<div
class="flex flex-col md:flex-row md:items-center justify-between gap-8"
>
<!-- Column 1: Navigation Prompt -->
<div class="flex-1 text-center">
<div class="flex-1 text-center order-1 md:order-1 w-full">
<h3 class="font-playfair font-semibold text-2xl text-black mb-4">
Go to Product page for more Products
</h3>
@ -283,40 +292,49 @@
</a>
</div>
<!-- Column 2: Product 1 Card -->
<div class="flex-1 text-center product-card-1">
<!-- Products Row: side-by-side on mobile, unchanged on desktop -->
<div
class="order-3 md:order-2 w-full flex gap-4 justify-center md:gap-8 md:justify-between md:contents"
>
<!-- Column 2: Product 1 Card -->
<div
class="bg-linen rounded-lg mb-3 w-80 h-80 flex items-center justify-center mx-auto"
class="text-center w-1/2 md:w-auto md:order-2 product-card-1"
>
<div
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
class="bg-linen rounded-lg mb-3 w-40 h-40 md:w-80 md:h-80 flex items-center justify-center mx-auto"
>
Select Product
<div
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
>
Select Product
</div>
</div>
<p class="font-playfair font-medium text-2xl text-black">
Select Product
</p>
</div>
<p class="font-playfair font-medium text-2xl text-black">
Select Product
</p>
</div>
<!-- Column 3: Product 2 Card -->
<div class="flex-1 text-center product-card-2">
<!-- Column 3: Product 2 Card -->
<div
class="bg-linen rounded-lg mb-3 w-80 h-80 flex items-center justify-center mx-auto"
class="text-center w-1/2 md:w-auto md:order-3 product-card-2"
>
<div
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
class="bg-linen rounded-lg mb-3 w-40 h-40 md:w-80 md:h-80 flex items-center justify-center mx-auto"
>
Select Product
<div
class="w-full h-full flex items-center justify-center text-gray-400 text-sm"
>
Select Product
</div>
</div>
<p class="font-playfair font-medium text-2xl text-black">
Select Product
</p>
</div>
<p class="font-playfair font-medium text-2xl text-black">
Select Product
</p>
</div>
<!-- Column 4: Add Product Dropdown -->
<div class="flex-1 text-center">
<div class="flex-1 text-center order-2 md:order-4 w-full">
<h3 class="font-playfair font-semibold text-2xl text-black mb-4">
Add A Product
</h3>

81
styles/main.css
View file

@ -713,6 +713,10 @@ video {
order: 3;
}
.order-4 {
order: 4;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
@ -993,6 +997,10 @@ video {
height: 56px;
}
.h-40 {
height: 10rem;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
@ -1109,6 +1117,10 @@ video {
width: 100%;
}
.w-1\/2 {
width: 50%;
}
.min-w-\[2rem\] {
min-width: 2rem;
}
@ -1117,6 +1129,10 @@ video {
min-width: 96px;
}
.min-w-\[720px\] {
min-width: 720px;
}
.max-w-2xl {
max-width: 42rem;
}
@ -1376,6 +1392,10 @@ video {
overflow: hidden;
}
.overflow-visible {
overflow: visible;
}
.overflow-x-auto {
overflow-x: auto;
}
@ -2495,6 +2515,26 @@ video {
top: 24rem;
}
.md\:order-none {
order: 0;
}
.md\:order-1 {
order: 1;
}
.md\:order-2 {
order: 2;
}
.md\:order-3 {
order: 3;
}
.md\:order-4 {
order: 4;
}
.md\:mt-10 {
margin-top: 2.5rem;
}
@ -2511,6 +2551,18 @@ video {
margin-bottom: 2rem;
}
.md\:ml-8 {
margin-left: 2rem;
}
.md\:block {
display: block;
}
.md\:contents {
display: contents;
}
.md\:h-\[484px\] {
height: 484px;
}
@ -2531,6 +2583,10 @@ video {
height: 64px;
}
.md\:h-80 {
height: 20rem;
}
.md\:min-h-\[64px\] {
min-height: 64px;
}
@ -2583,6 +2639,14 @@ video {
width: 5rem;
}
.md\:w-auto {
width: auto;
}
.md\:w-80 {
width: 20rem;
}
.md\:max-w-md {
max-width: 28rem;
}
@ -2603,6 +2667,14 @@ video {
flex-direction: column;
}
.md\:items-center {
align-items: center;
}
.md\:justify-between {
justify-content: space-between;
}
.md\:gap-12 {
gap: 3rem;
}
@ -2629,6 +2701,15 @@ video {
overflow: visible;
}
.md\:border-l {
border-left-width: 1px;
}
.md\:border-gray-200 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.md\:pr-0 {
padding-right: 0px;
}