fix product details page mobile image slider

codux-templates · Jan 7, 2025 · 3ea2d44 · 3ea2d44
1 parent 116c20d
commit 3ea2d44
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 10 deletions.
diff --git a/app/routes/product-details.$productSlug/route.module.scss b/app/routes/product-details.$productSlug/route.module.scss
@@ -1,5 +1,5 @@
 .page {
-    padding: 0 8px 50px;
+    padding: 0 0 50px;
 }
 
 .content {
@@ -11,6 +11,10 @@
     position: relative;
 }
 
+.productImagesWrapper {
+    padding-left: 8px;
+}
+
 .productInfo {
     position: sticky;
     place-self: start;
@@ -76,26 +80,38 @@
     font-size: 18px;
 }
 
-.socialLinks {
-    margin-top: 36px;
+.spotlightsSection{
+    padding: 0 8px;
+}
+
+.banner{
+    padding: 0 8px;
 }
 
 @media (max-width: 1024px) {
     .content {
         grid-template-columns: 1fr 1fr;
-        column-gap: 16px;
+        column-gap: 8px;
     }
 }
 
 @media (max-width: 768px) {
     .content {
         grid-template-columns: 1fr;
         row-gap: 24px;
-        padding-right: unset;
+        padding-right: 8px;
+    }
+
+    .productInfo {
+        padding: 0 8px;
     }
 }
 
 @media (max-width: 480px) {
+    .productImagesWrapper {
+        padding-left: 0;
+    }
+
     .productName {
         font: var(--heading6);
     }

diff --git a/app/routes/product-details.$productSlug/route.tsx b/app/routes/product-details.$productSlug/route.tsx
@@ -57,7 +57,9 @@ export default function ProductDetailsPage() {
             {/*<Breadcrumbs breadcrumbs={breadcrumbs} />*/}
 
             <div className={styles.content}>
+              <div className={styles.productImagesWrapper}>
                 <ProductImages media={media} />
+              </div>
 
                 <div className={styles.productInfo}>
                     <h1 className={styles.productName}>{product.name}</h1>
@@ -159,6 +161,7 @@ export default function ProductDetailsPage() {
 
             <FeaturedProductsSection  categorySlug={'new-in'} title={'You might also like'} productCount={4} />
             <Section
+                className={styles.spotlightsSection}
                 title="Mix, match, and make it yours"
                 subheading="Complete the look"
             >
@@ -210,6 +213,7 @@ export default function ProductDetailsPage() {
                 />
             </Section>
             <Banner
+              className={styles.banner}
                 title="A hot summer deserves a cool hat"
                 subheading="Product Spotlight"
                 buttonText="Shop now"

diff --git a/src/components/banner/banner.tsx b/src/components/banner/banner.tsx
@@ -8,12 +8,13 @@ interface BannerProps {
     buttonText: string;
     buttonUrl: string;
     imageUrl: string;
+    className?: string;
 }
 
-export const Banner = ({ title, subheading, buttonText, buttonUrl, imageUrl }: BannerProps) => {
+export const Banner = ({ title, subheading, buttonText, buttonUrl, imageUrl, className }: BannerProps) => {
     const navigate = useNavigate();
     return (
-        <div className={styles.banner}>
+        <div className={classNames(styles.banner, className)}>
             <div className={styles.bannerContentWrapper}>
                 <div className={styles.bannerContent}>
                     <span className={styles.bannerSubheading}>{subheading}</span>

diff --git a/src/components/featured-products-section/featured-products-section.module.scss b/src/components/featured-products-section/featured-products-section.module.scss
@@ -1,5 +1,4 @@
 .root {
-    margin: 0 calc(-1 * var(--pagePaddingHoriz));
     padding: 75px var(--pagePaddingHoriz);
     display: flex;
     flex-direction: column;

diff --git a/src/components/product-images/product-images.module.scss b/src/components/product-images/product-images.module.scss
@@ -47,5 +47,7 @@
         width: 100%;
         max-width: 100vw;
         height: 460px;
+        padding-left: 8px;
+        padding-right: 8px;
     }
 }
diff --git a/src/components/section/section.tsx b/src/components/section/section.tsx
@@ -1,13 +1,15 @@
+import classNames from 'classnames';
 import styles from './section.module.scss';
 
 interface SectionProps {
     title: string;
     subheading: string;
     children?: React.ReactNode;
+    className?: string;
 }
-export const Section = ({title, subheading, children}: SectionProps) => {
+export const Section = ({title, subheading, children, className}: SectionProps) => {
     return (
-        <div className={styles.root}>
+        <div className={classNames(styles.root, className)}>
             <div className={styles.header}>
                 <div className={styles.subheading}>{subheading}</div>
                 <h3 className={'uppercase'}>{title}</h3>