/* ========================================================== Aaspricual - Mobile Responsive Fixes HOW TO USE: 1. Upload this file to your server root (alongside index.html) 2. Add this line in index.html AFTER the existing CSS: ========================================================== */ /* ----------------------------------------------------------- 1. HERO SECTION Problem: Hero height (320px) is too short to fit badge + heading + description + 2 buttons + trust badges. Trust badges get clipped by overflow-hidden. ----------------------------------------------------------- */ @media (max-width: 639px) { section.relative.overflow-hidden > .h-\[320px\] { height: 440px !important; } section.relative.overflow-hidden .mb-8 { margin-bottom: 1rem !important; } section.relative.overflow-hidden .mb-10 { margin-bottom: 1.5rem !important; } section.relative.overflow-hidden .mb-4 { margin-bottom: 0.625rem !important; } section.relative.overflow-hidden h2.font-heading { font-size: 1.625rem !important; line-height: 1.15 !important; } section.relative.overflow-hidden .max-w-2xl > p { font-size: 0.8125rem !important; line-height: 1.5 !important; } section.relative.overflow-hidden .flex.flex-wrap { gap: 0.625rem !important; } section.relative.overflow-hidden .flex.flex-wrap > div { gap: 0.375rem !important; } } @media (max-width: 374px) { section.relative.overflow-hidden > .h-\[320px\] { height: 480px !important; } section.relative.overflow-hidden h2.font-heading { font-size: 1.375rem !important; } section.relative.overflow-hidden .flex.flex-col.gap-3 > a, section.relative.overflow-hidden .flex.flex-col.gap-3 > span, section.relative.overflow-hidden .flex.flex-col.gap-3 button { font-size: 0.8125rem !important; padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } } /* ----------------------------------------------------------- 2. PRODUCT CARDS (Featured Products & New Arrivals grids) Problem: Cards are cramped on small mobile screens — text, prices, and buttons feel tight. ----------------------------------------------------------- */ @media (max-width: 639px) { .grid.grid-cols-2 > .group { border-radius: 0.875rem !important; } .grid.grid-cols-2 > .group > .flex.flex-col.p-3 { padding: 0.625rem !important; } .grid.grid-cols-2 > .group a.line-clamp-2 { font-size: 0.6875rem !important; line-height: 1.35 !important; margin-bottom: 0.25rem !important; } .grid.grid-cols-2 > .group .flex.items-center.gap-0\.5 svg { width: 0.625rem !important; height: 0.625rem !important; } .grid.grid-cols-2 > .group .mb-2\.5 { margin-bottom: 0.375rem !important; } .grid.grid-cols-2 > .group .mb-3.flex.flex-wrap { margin-bottom: 0.375rem !important; gap: 0.25rem !important; } .grid.grid-cols-2 > .group .text-base.font-bold { font-size: 0.875rem !important; } .grid.grid-cols-2 > .group .mt-auto.flex.gap-2 { gap: 0.375rem !important; } .grid.grid-cols-2 > .group .mt-auto.flex.gap-2 button:first-child { font-size: 0.6875rem !important; padding: 0.375rem 0.5rem !important; gap: 0.25rem !important; border-radius: 0.625rem !important; } .grid.grid-cols-2 > .group .mt-auto.flex.gap-2 button:first-child svg { width: 0.75rem !important; height: 0.75rem !important; } .grid.grid-cols-2 > .group .mt-auto.flex.gap-2 button:last-child { padding-left: 0.5rem !important; padding-right: 0.5rem !important; border-radius: 0.625rem !important; } } @media (max-width: 374px) { .grid.grid-cols-2 { gap: 0.375rem !important; } .grid.grid-cols-2 > .group > .flex.flex-col.p-3 { padding: 0.375rem !important; } .grid.grid-cols-2 > .group .mt-auto.flex.gap-2 button:first-child { font-size: 0.625rem !important; padding: 0.3125rem 0.375rem !important; } } /* ----------------------------------------------------------- 3. FESTIVE OFFERS BANNER Problem: The "Shop Festive Collection" button gets hidden below the banner image area on mobile because the banner height (set by the image) is too short for the content. ----------------------------------------------------------- */ @media (max-width: 639px) { .rounded-2xl.shadow-lg { min-height: 240px !important; } .rounded-2xl.shadow-lg > img { min-height: 240px !important; height: 100% !important; object-fit: cover !important; } .rounded-2xl.shadow-lg h2.font-heading { font-size: 1.125rem !important; line-height: 1.25 !important; margin-bottom: 0.375rem !important; } .rounded-2xl.shadow-lg p { font-size: 0.6875rem !important; line-height: 1.45 !important; margin-bottom: 0.625rem !important; } .rounded-2xl.shadow-lg span.inline-flex { margin-bottom: 0.375rem !important; font-size: 9px !important; padding: 0.1875rem 0.5rem !important; } .rounded-2xl.shadow-lg a { padding: 0.5rem 1rem !important; font-size: 0.75rem !important; } } @media (max-width: 374px) { .rounded-2xl.shadow-lg { min-height: 260px !important; } .rounded-2xl.shadow-lg > img { min-height: 260px !important; } .rounded-2xl.shadow-lg h2.font-heading { font-size: 1rem !important; } } /* ----------------------------------------------------------- 4. NEWSLETTER / SUBSCRIBE SECTION (in Footer) Problem: The Subscribe button gets pushed to the screen edge or cut off on mobile because the input + button row is too wide for the available container space. Fix: Stack input and button vertically on mobile. ----------------------------------------------------------- */ @media (max-width: 639px) { footer > .bg-primary .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } footer > .bg-primary .container > div:first-child { text-align: center !important; } footer > .bg-primary .container > div:first-child h3 { font-size: 1.125rem !important; } footer > .bg-primary .flex.w-full.max-w-md { flex-direction: column !important; max-width: 100% !important; gap: 0.625rem !important; } footer > .bg-primary .flex.w-full.max-w-md input { width: 100% !important; border-radius: 0.5rem !important; } footer > .bg-primary .flex.w-full.max-w-md button { width: 100% !important; border-radius: 0.5rem !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } } /* ----------------------------------------------------------- 5. FOOTER GRID - Better mobile stacking ----------------------------------------------------------- */ @media (max-width: 639px) { footer > .container.grid { gap: 1.5rem !important; padding-top: 2rem !important; padding-bottom: 2rem !important; } } /* ----------------------------------------------------------- 6. HEADER - Compact spacing on small phones ----------------------------------------------------------- */ @media (max-width: 374px) { header .container.flex { gap: 0.25rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } header .container.flex .flex.items-center.gap-1 { gap: 0 !important; } header .container.flex .flex.items-center.gap-1 a, header .container.flex .flex.items-center.gap-1 button { padding: 0.375rem !important; } } /* ----------------------------------------------------------- 7. TRUST BADGES (below Hero) - Better mobile layout ----------------------------------------------------------- */ @media (max-width: 374px) { .border-y.border-border.bg-card .grid.grid-cols-2 { gap: 0.5rem !important; } .border-y.border-border.bg-card .grid.grid-cols-2 > div { gap: 0.5rem !important; } .border-y.border-border.bg-card .grid.grid-cols-2 .h-12.w-12 { height: 2.25rem !important; width: 2.25rem !important; } .border-y.border-border.bg-card .grid.grid-cols-2 .h-12.w-12 svg { width: 1.125rem !important; height: 1.125rem !important; } }