Mobile Steps Slider Design

May 6, 2025 · AI Conversations

User

<script>

</script>

<style>
@media (max-width: 767px) {
    .mobile-steps-slider-wrapper {
        padding: 20px 0;
        display: block;
    }

    .owl-carousel .item {
        text-align: center;
        position: relative;
    }

    .step-item {
        position: relative;
        width: 120px;
        height: 120px;
        margin: auto;
    }

    .step-circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #e9205a;
        border: 4px solid white;
        box-shadow: 0 0 0 5px rgba(233, 32, 90, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        position: relative;
        z-index: 1;
    }

    .step-circle img {
        max-width: 40px;
        max-height: 40px;
        filter: brightness(0) invert(1); /* turns icon white */
    }

    .dot {
        width: 10px;
        height: 10px;
        background-color: #e9205a;
        border-radius: 50%;
        position: absolute;
        z-index: 2;
    }

    .dot.top-left {
        top: -8px;
        left: -8px;
    }

    .dot.bottom-left {
        bottom: -8px;
        left: -8px;
    }

    .dashed-line {
        position: absolute;
        top: 50%;
        left: 100%;
        width: 40px;
        height: 1px;
        border-top: 2px dashed #e9205a;
        z-index: 0;
        transform: translateY(-50%);
    }

    .step-item p {
        margin-top: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
        text-align: center;
        max-width: 120px;
    }

    .owl-carousel .item:last-child .dashed-line {
        display: none;
    }
}

@media (min-width: 768px) {
    .mobile-steps-slider-wrapper {
        display: none;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
            if (window.innerWidth <= 767) {
                $('#mobile-steps-carousel').owlCarousel({
                    loop: false,
                    margin: 20,
                    nav: false,
                    dots: true,
                    items: 1,
                });
            }
        });
</script>

Assistant

To match the style of the attached image in your **Elementor custom widget** for each step slide, you’ll want to adjust your `.step-item`, `.step-circle`, and surrounding design to achieve:

– A **perfect circle** with a **dark background**
– **White icon** centered
– **Pink border and outer dotted circle**
– **Matching padding and alignment**
– **Curved dotted connecting lines with circular pink dots**

Here’s the updated CSS and adjusted HTML

User

sad

Assistant

Thanks for sharing the reference design. Based on the image, your desired layout includes:

– A **large black circle** background
– White icon centered inside
– A **pink circular border with a dashed pink connector**
– Three **pink dots** at top, left, and bottom positions of the outer circle
– Clean label underneath (like "Beskriv dina behov")

Here’s how to **update your CSS and HTML** to match the style **exactly**:

### ✅ CSS (Replace your existing mobile CSS block with this)

@media (max-width: 767px) {
    .mobile-steps-slider-wrapper {
        padding: 40px 0;
    }

    .step-item {
        position: relative;
        text-align: center;
    }

    .step-outer {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        position: relative;
        margin: auto;
        border: 4px solid #e9205a;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .step-outer::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        border-radius: 50%;
        border: 2px dashed #e9205a;
        top: -50%;
        left: -50%;
        z-index: 0;
    }

    .step-inner {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        position: relative;
    }

    .step-inner img {
        max-width: 50px;
        max-height: 50px;
        filter: brightness(0) invert(1);
    }

    .step-label {
        margin-top: 20px;
        font-size: 14px;
        font-weight: 600;
        color: #1a1a1a;
        text-align: center;
    }

    .dot-circle {
        width: 12px;
        height: 12px;
        background-color: #e9205a;
        border-radius: 50%;
        position: absolute;
        z-index: 2;
    }

    .dot-top {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
    }

    .dot-left {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
    }

    .dot-bottom {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }

    .owl-carousel .item:last-child .step-outer::before {
        display: none;
    }
}

—

### ✅ HTML (Update your loop inside `render()` to this)
Replace:

<div class="item">
    <div class="step-item">
        ...
    </div>
</div>

with:

<div class="item">
    <div class="step-item">
        <div class="step-outer">
            <div class="dot-circle dot-top"></div>
            <div class="dot-circle dot-left"></div>
            <div class="dot-circle dot-bottom"></div>
            <div class="step-inner">
                <img src="<?php echo esc_url($step['step_image']['url']); ?>" alt="Step">
            </div>
        </div>
        <div class="step-label"><?php echo esc_html($step['step_text']); ?></div>
    </div>
</div>

—

Let me know if you want to include curved dashed connectors between items or want to show this version on desktop too.

Mobile Steps Slider Design

Leave a Comment Cancel