Mobile Owl Carousel Styling

August 7, 2025 · AI Conversations

User
<style>
.wc-category-slider .product-card {
    text-align: center;
}
 .wc-category-slider .product-card img {
    max-width: 100%;
    height: 200px;
    width: 200px;
    object-fit: cover;
}
.product-details {
    padding: 24px 17px 0 17px;
    display: flex
;
gap:16px;
    flex-direction: column;
    align-items: center;
}
   .wc-category-slider .product-card h2.woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 600;
    color: #0A4C4D;
    margin:0;
}
    .wc-category-slider .price {
    color: #052626;
    font-weight: 400;
    font-size: 14px;
}
  .wc-category-slider .star-rating--inline {
    display: inline-block;
    min-height: 16px;
    vertical-align: middle;
    margin: 0;
}
.wc-category-slider .button.pick-button {
    background: transparent;
    border: 2px solid #0F7173;
    color: #0F7173;
    padding: 8px 14px;
    border-radius: 25px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
    font-size: 12px;
}
        .wc-category-slider .button.pick-button:hover {
            background-color: #007c91;
            color: #fff;
        }
      .product-detail-inner {
    display: flex
;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    .product-detail-inner  .span.amount{
            color: #052626;
    font-weight: 400;
    font-size: 14px;
    }
    @media(max-width:1000px){
        .wc-category-slider .product-card img {
    height: auto !important;
    width: 100% !important;
        }
    }
</style>
<script>
jQuery(document).ready(function($){
            $('.wc-category-slider').owlCarousel({
                items: 4,
                loop: true,
                margin: 20,
                nav: true,
                dots: false,
                responsive:{
                    0:{ items:1 },
                    600:{ items:2 },
                    1000:{ items:4 }
                }
            });
        });
</script>
Assistant
To **replicate the design shown in the screenshot for mobile view** without changing anything on desktop, follow these steps:

—

### ✅ **Add Mobile Styles + Arrows for Owl Carousel**

We'll:

1. Add **mobile-specific styles** using a media query.
2. Add **custom mobile arrow styles and HTML** that look like the ones in the screenshot (“ in round buttons).
3. Ensure it's only applied **on mobile (max-width: 768px)**.

—

### 🔧 **Update your existing code with this below**:
Append this after your current “ block:

<style>
/* Mobile Arrows */
@media(max-width: 768px) {
    .owl-nav {
        position: absolute;
        top: 35%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        pointer-events: none;
    }

    .owl-nav button.owl-prev,
    .owl-nav button.owl-next {
        background-color: #EAF6F6;
        border: 1px solid #0F7173;
        color: #0F7173;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        pointer-events: all;
        transition: all 0.3s ease;
    }

    .owl-nav button.owl-prev:hover,
    .owl-nav button.owl-next:hover {
        background-color: #0F7173;
        color: #fff;
    }

    /* Ensure arrows are visible only on mobile */
    .owl-carousel .owl-nav {
        display: flex !important;
    }
}
</style>

—

### 🧠 **Ensure your Owl Carousel init code includes nav text:**

Update your Owl Carousel JS:

<script>
jQuery(document).ready(function($){
    $('.wc-category-slider').owlCarousel({
        items: 4,
        loop: true,
        margin: 20,
        nav: true,
        navText: ['<', '>'],
        dots: false,
        responsive:{
            0:{ items:1 },
            600:{ items:2 },
            1000:{ items:4 }
        }
    });
});
</script>

—

✅ **Result on Mobile:**
– Only 1 or 2 products visible depending on screen size.
– Arrows (“) styled like the screenshot.
– Desktop remains untouched.

Let me know if you'd like to **add swipe support** or **custom pagination** below the carousel as well.

User
<style>
.wc-category-slider .product-card {
    text-align: center;
    display: flex
;
    flex-direction: column;
    align-items: center;
}
 .wc-category-slider .product-card img {
    max-width: 100%;
    height: 200px;
    width: 200px;
    object-fit: cover;
}
.product-details {
    padding: 24px 17px 0 17px;
    display: flex
;
gap:16px;
    flex-direction: column;
    align-items: center;
}
   .wc-category-slider .product-card h2.woocommerce-loop-product__title {
    font-size: 14px;
    font-weight: 600;
    color: #0A4C4D;
    margin:0;
}
    .wc-category-slider .price {
    color: #052626;
    font-weight: 400;
    font-size: 14px;
}
  .wc-category-slider .star-rating--inline {
    display: inline-block;
    min-height: 16px;
    vertical-align: middle;
    margin: 0;
}
.wc-category-slider .button.pick-button {
    background: transparent;
    border: 2px solid #0F7173;
    color: #0F7173;
    padding: 8px 14px;
    border-radius: 25px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease;
    font-size: 12px;
}
        .wc-category-slider .button.pick-button:hover {
            background-color: #007c91;
            color: #fff;
        }
      .product-detail-inner {
    display: flex
;
    gap: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    .product-detail-inner  .span.amount{
            color: #052626;
    font-weight: 400;
    font-size: 14px;
    }
    /* @media(max-width:1000px){
        .wc-category-slider .product-card img {
    height: auto !important;
    width: 100% !important;
        }
    } */
    @media(max-width: 768px) {
    .owl-nav {
        position: absolute;
        top: 35%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        pointer-events: none;
    }

    .owl-nav button.owl-prev,
    .owl-nav button.owl-next {
        background-color: #EAF6F6;
        border: 1px solid #0F7173;
        color: #0F7173;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        pointer-events: all;
        transition: all 0.3s ease;
    }

    .owl-nav button.owl-prev:hover,
    .owl-nav button.owl-next:hover {
        background-color: #0F7173;
        color: #fff;
    }

    /* Ensure arrows are visible only on mobile */
    .owl-carousel .owl-nav {
        display: flex !important;
    }
}
</style>
<script>
jQuery(document).ready(function($){
            $('.wc-category-slider').owlCarousel({
                items: 4,
                loop: true,
                margin: 20,
                nav: true,
                dots: false,
                responsive:{
                    0:{ items:1 },
                    600:{ items:2 },
                    1000:{ items:4 }
                }
            });
        });
</script>
Assistant
Thanks! Let's fix the **arrow alignment issue** (currently appearing in the middle of the product image) **only on mobile**, and **replace the default arrows with your provided custom SVG**.

—

### ✅ Here's what we’ll do:

1. **Replace `navText`** in Owl Carousel with your SVG.
2. **Move arrows to the left/right edge (vertically centered)** beside the entire slider (not on top of product image).
3. **Restrict this behavior to mobile** using `@media (max-width: 768px)`.

—

### 🛠 Final Updated Code Snippets

#### ✅ **1. Update the `navText` in your JS:**
Update the Owl Carousel script as follows:

<script>
jQuery(document).ready(function($){
    const prevSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="18" viewBox="0 0 21 18" fill="none"><path d="M1.26528 9.80796L8.46404 17.0096C8.68943 17.2351 8.99513 17.3618 9.31389 17.3618C9.63265 17.3618 9.93835 17.2351 10.1637 17.0096C10.3891 16.7841 10.5158 16.4783 10.5158 16.1594C10.5158 15.8406 10.3891 15.5347 10.1637 15.3092L5.01363 10.159H19.7111C20.0293 10.159 20.3345 10.0326 20.5595 9.80749C20.7845 9.58239 20.9109 9.2771 20.9109 8.95877C20.9109 8.64043 20.7845 8.33514 20.5595 8.11004C20.3345 7.88494 20.0293 7.75849 19.7111 7.75849H5.01363L10.1617 2.60529C10.3871 2.37981 10.5138 2.07398 10.5138 1.75509C10.5138 1.43621 10.3871 1.13038 10.1617 0.904897C9.93635 0.679411 9.63065 0.552734 9.31189 0.552734C8.99313 0.552734 8.68743 0.679411 8.46204 0.904897L1.26328 8.10657C1.15141 8.21823 1.06269 8.3509 1.00221 8.49696C0.941738 8.64302 0.910704 8.79959 0.910891 8.95768C0.911076 9.11577 0.942478 9.27227 1.0033 9.41819C1.06411 9.56411 1.15314 9.69657 1.26528 9.80796Z" fill="#0F7173"/></svg>';
    const nextSvg = prevSvg; // same arrow for both directions

    $('.wc-category-slider').owlCarousel({
        items: 4,
        loop: true,
        margin: 20,
        nav: true,
        navText: [prevSvg, nextSvg],
        dots: false,
        responsive:{
            0:{ items:1 },
            600:{ items:2 },
            1000:{ items:4 }
        }
    });
});
</script>

—

#### ✅ **2. Adjust CSS to correctly position SVG arrows:**
Replace your `@media(max-width: 768px)` block with this improved version:

@media(max-width: 768px) {
    .owl-carousel .owl-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: flex !important;
        justify-content: space-between;
        padding: 0 8px;
        pointer-events: none;
    }

    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {
        background-color: #EAF6F6;
        border: 1px solid #0F7173;
        color: #0F7173;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0; /* hide default text */
        pointer-events: all;
        transition: all 0.3s ease;
    }

    .owl-carousel .owl-nav button.owl-prev:hover,
    .owl-carousel .owl-nav button.owl-next:hover {
        background-color: #0F7173;
    }

    .owl-carousel .owl-nav button.owl-prev svg,
    .owl-carousel .owl-nav button.owl-next svg {
        width: 18px;
        height: auto;
        fill: #0F7173;
        transition: fill 0.3s ease;
    }

    .owl-carousel .owl-nav button.owl-prev:hover svg,
    .owl-carousel .owl-nav button.owl-next:hover svg {
        fill: #fff;
    }
}

—

✅ **What this does:**

– Replaces the arrows with your custom **SVG**.
– Aligns them to the **left/right** side of the slider **at vertical center** on **mobile only**.
– Keeps desktop design **unchanged**.

Let me know if you want to:
– Use different arrows for prev/next?
– Animate the arrow movement or add shadow?
– Add swipe gesture prompts or dots under the slider?

Happy to help style it exactly to your vision.

User
<script>
jQuery(document).ready(function($){
    const prevSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="18" viewBox="0 0 21 18" fill="none"><path d="M1.26528 9.80796L8.46404 17.0096C8.68943 17.2351 8.99513 17.3618 9.31389 17.3618C9.63265 17.3618 9.93835 17.2351 10.1637 17.0096C10.3891 16.7841 10.5158 16.4783 10.5158 16.1594C10.5158 15.8406 10.3891 15.5347 10.1637 15.3092L5.01363 10.159H19.7111C20.0293 10.159 20.3345 10.0326 20.5595 9.80749C20.7845 9.58239 20.9109 9.2771 20.9109 8.95877C20.9109 8.64043 20.7845 8.33514 20.5595 8.11004C20.3345 7.88494 20.0293 7.75849 19.7111 7.75849H5.01363L10.1617 2.60529C10.3871 2.37981 10.5138 2.07398 10.5138 1.75509C10.5138 1.43621 10.3871 1.13038 10.1617 0.904897C9.93635 0.679411 9.63065 0.552734 9.31189 0.552734C8.99313 0.552734 8.68743 0.679411 8.46204 0.904897L1.26328 8.10657C1.15141 8.21823 1.06269 8.3509 1.00221 8.49696C0.941738 8.64302 0.910704 8.79959 0.910891 8.95768C0.911076 9.11577 0.942478 9.27227 1.0033 9.41819C1.06411 9.56411 1.15314 9.69657 1.26528 9.80796Z" fill="#0F7173"/></svg>';
    const nextSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="18" viewBox="0 0 21 18" fill="none">
<path d="M20.0804 9.80796L12.8817 17.0096C12.6563 17.2351 12.3506 17.3618 12.0318 17.3618C11.7131 17.3618 11.4074 17.2351 11.182 17.0096C10.9566 16.7841 10.8299 16.4783 10.8299 16.1594C10.8299 15.8406 10.9566 15.5347 11.182 15.3092L16.3321 10.159H1.63461C1.3164 10.159 1.01123 10.0326 0.786226 9.80749C0.561221 9.58239 0.434814 9.2771 0.434814 8.95877C0.434814 8.64043 0.561221 8.33514 0.786226 8.11004C1.01123 7.88494 1.3164 7.75849 1.63461 7.75849H16.3321L11.184 2.60529C10.9586 2.37981 10.8319 2.07398 10.8319 1.75509C10.8319 1.43621 10.9586 1.13038 11.184 0.904897C11.4094 0.679411 11.7151 0.552734 12.0338 0.552734C12.3526 0.552734 12.6583 0.679411 12.8837 0.904897L20.0824 8.10657C20.1943 8.21823 20.283 8.3509 20.3435 8.49696C20.404 8.64302 20.435 8.79959 20.4348 8.95768C20.4346 9.11577 20.4032 9.27227 20.3424 9.41819C20.2816 9.56411 20.1926 9.69657 20.0804 9.80796Z" fill="#0F7173"/>
</svg>'; 
    $('.wc-category-slider').owlCarousel({
        items: 4,
        loop: true,
        margin: 20,
        nav: true,
        navText: [prevSvg, nextSvg],
        dots: false,
        responsive:{
            0:{ items:1 },
            600:{ items:2 },
            1000:{ items:4 }
        }
    });
});
</script>

correct it !

Assistant
Your script is **almost correct**, but since you’re using **multi-line SVG strings**, you need to escape newlines properly in JavaScript. Otherwise, your code might break or render incorrectly.

—

### ✅ Here’s the corrected and clean version of your “:

<script>
jQuery(document).ready(function($){
    const prevSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="18" viewBox="0 0 21 18" fill="none"><path d="M1.26528 9.80796L8.46404 17.0096C8.68943 17.2351 8.99513 17.3618 9.31389 17.3618C9.63265 17.3618 9.93835 17.2351 10.1637 17.0096C10.3891 16.7841 10.5158 16.4783 10.5158 16.1594C10.5158 15.8406 10.3891 15.5347 10.1637 15.3092L5.01363 10.159H19.7111C20.0293 10.159 20.3345 10.0326 20.5595 9.80749C20.7845 9.58239 20.9109 9.2771 20.9109 8.95877C20.9109 8.64043 20.7845 8.33514 20.5595 8.11004C20.3345 7.88494 20.0293 7.75849 19.7111 7.75849H5.01363L10.1617 2.60529C10.3871 2.37981 10.5138 2.07398 10.5138 1.75509C10.5138 1.43621 10.3871 1.13038 10.1617 0.904897C9.93635 0.679411 9.63065 0.552734 9.31189 0.552734C8.99313 0.552734 8.68743 0.679411 8.46204 0.904897L1.26328 8.10657C1.15141 8.21823 1.06269 8.3509 1.00221 8.49696C0.941738 8.64302 0.910704 8.79959 0.910891 8.95768C0.911076 9.11577 0.942478 9.27227 1.0033 9.41819C1.06411 9.56411 1.15314 9.69657 1.26528 9.80796Z" fill="#0F7173"/></svg>';

    const nextSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="21" height="18" viewBox="0 0 21 18" fill="none"><path d="M20.0804 9.80796L12.8817 17.0096C12.6563 17.2351 12.3506 17.3618 12.0318 17.3618C11.7131 17.3618 11.4074 17.2351 11.182 17.0096C10.9566 16.7841 10.8299 16.4783 10.8299 16.1594C10.8299 15.8406 10.9566 15.5347 11.182 15.3092L16.3321 10.159H1.63461C1.3164 10.159 1.01123 10.0326 0.786226 9.80749C0.561221 9.58239 0.434814 9.2771 0.434814 8.95877C0.434814 8.64043 0.561221 8.33514 0.786226 8.11004C1.01123 7.88494 1.3164 7.75849 1.63461 7.75849H16.3321L11.184 2.60529C10.9586 2.37981 10.8319 2.07398 10.8319 1.75509C10.8319 1.43621 10.9586 1.13038 11.184 0.904897C11.4094 0.679411 11.7151 0.552734 12.0338 0.552734C12.3526 0.552734 12.6583 0.679411 12.8837 0.904897L20.0824 8.10657C20.1943 8.21823 20.283 8.3509 20.3435 8.49696C20.404 8.64302 20.435 8.79959 20.4348 8.95768C20.4346 9.11577 20.4032 9.27227 20.3424 9.41819C20.2816 9.56411 20.1926 9.69657 20.0804 9.80796Z" fill="#0F7173"/></svg>';

    $('.wc-category-slider').owlCarousel({
        items: 4,
        loop: true,
        margin: 20,
        nav: true,
        navText: [prevSvg, nextSvg],
        dots: false,
        responsive:{
            0:{ items:1 },
            600:{ items:2 },
            1000:{ items:4 }
        }
    });
});
</script>

—

### ✅ Summary

– ✅ SVGs are now fully inline and properly escaped in one line.
– ✅ `navText` is assigned with **correct left (`prevSvg`) and right (`nextSvg`)** arrows.
– ✅ Works seamlessly with Owl Carousel and your custom CSS from earlier.

Let me know if you’d like the **arrow direction flipped for RTL languages** or need the **arrow icons to animate**!

User
responsive:{
0:{ items:1 },
400:{ items:2 },
800:{ items:3 },
1000:{ items:4 }
}

till 400 , I want 1 after till 600 I want 2 and till 849 , I want 3 , and after that I want 4

Assistant
To match your exact responsive requirements for the Owl Carousel, here's the correct setup based on your conditions:

—

### 🎯 Your Requirements Recap:
| Screen Width (px) | Items Visible |
|——————-|—————-|
| 0–399 | 1 item |
| 400–599 | 2 items |
| 600–849 | 3 items |
| 850+ | 4 items |

—

### ✅ Final `responsive` Configuration:

responsive: {
    0:     { items: 1 },
    400:   { items: 2 },
    600:   { items: 3 },
    850:   { items: 4 }
}

### 🔧 Update your full Owl Carousel call like this:

$('.wc-category-slider').owlCarousel({
    items: 4,
    loop: true,
    margin: 20,
    nav: true,
    navText: [prevSvg, nextSvg],
    dots: false,
    responsive: {
        0:     { items: 1 },
        400:   { items: 2 },
        600:   { items: 3 },
        850:   { items: 4 }
    }
});

—

✅ This configuration ensures your items **scale perfectly** based on the breakpoints you've defined. Let me know if you also want different `margin` or `nav` behavior per breakpoint!

User
design this , I want to add it into my code !
Assistant
Here's the full **HTML + CSS** to replicate the "Continue with Apple / Google" buttons exactly as shown in your screenshot — clean, rounded, with icon and text aligned center:

—

### ✅ **HTML:**

<div class="social-login-buttons">
    <button class="social-button apple">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple" />
        <span>Continue with Apple</span>
    </button>
    
    <button class="social-button google">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="Google" />
        <span>Continue with Google</span>
    </button>
</div>

—

### 🎨 **CSS:**

.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid #0F7173;
    border-radius: 999px;
    background-color: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #052626;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.social-button img {
    height: 20px;
    width: 20px;
}

.social-button:hover {
    background-color: #0F7173;
    color: #fff;
}

.social-button:hover img {
    filter: brightness(0) invert(1);
}

—

### 🧩 **How to Use:**

– ✅ Paste the HTML where you want the buttons to appear.
– ✅ Add the CSS to your theme’s stylesheet or inline in a “ block.
– ✅ Icons are loaded via CDN from Wikimedia (you can replace with local images or SVG inline if preferred).
– ✅ Fully responsive and matches your screenshot styling.

Would you like me to integrate it into a WordPress shortcode or template file directly for you?

Leave a Comment

Your email address will not be published. Required fields are marked *