support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-10-16 18:41:46 +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>