Increase Elementor Breakpoints

May 6, 2025 · AI Conversations

User

I'm only seeing 2 breakpoints to add in elemnetor for responsive !

how to increase that , when I went to layout in site setting , i got only 2 option s !

Assistant

Elementor by default offers **two custom breakpoints** beyond the desktop layout:

1. **Tablet**
2. **Mobile**

However, Elementor **Pro (3.4+)** allows you to enable **additional custom breakpoints** like:

– **Extra Wide** (e.g., >1440px)
– **Laptop** (e.g., 1024px–1366px)
– **Tablet Extra** (e.g., portrait vs. landscape)
– **Mobile Extra** (e.g., ≤480px)

### 🔧 How to Enable More Breakpoints in Elementor (Pro Only):

1. Go to **Elementor → Settings → Features** (in WordPress dashboard).
2. Find **"Additional Custom Breakpoints"**.
3. Set it to **Active** and save.
4. Now go to **Site Settings → Layout → Breakpoints**, and you'll see **more than 2 options** available.
5. Set your custom widths for each breakpoint as needed.

> ⚠️ If you're using the free version of Elementor, you’re limited to the 2 breakpoints (tablet + mobile) and desktop.

—

Would you like a workaround using custom CSS for more responsive control in the free version?

User

I have pro version already !

Assistant

Great — since you're using **Elementor Pro**, you can easily enable more breakpoints. Here's exactly how to do it:

—

### ✅ Steps to Enable More Breakpoints in Elementor Pro

1. **Go to your WordPress Dashboard**.
2. Navigate to:
**Elementor → Settings → Features**.
3. Find the feature called **“Additional Custom Breakpoints”**.
4. Set it to **Active** and click **Save Changes**.
5. Now, go to:
**Elementor → Site Settings → Layout → Breakpoints**.
6. You should now see **up to 7 breakpoints**:
– Extra Wide (e.g., >1440px)
– Desktop
– Laptop
– Tablet
– Tablet Extra
– Mobile
– Mobile Extra

7. You can adjust the **pixel values** for each one to suit your design needs.

—

### 🧪 Tip: Where to Use These
Once enabled, you'll see all these breakpoints in:
– The **responsive mode toolbar** in the Elementor editor
– **Section and widget visibility settings**
– **Responsive controls** for padding, margin, typography, etc.

—

Let me know if you want the ideal pixel values for modern devices!

User

its in swedish

Assistant

Got it — if your **WordPress or Elementor interface is in Swedish**, here's how to find the correct setting steps visually, even with the language difference:

—

### 🔁 Translate-Friendly Guide (Swedish Interface)

1. **Gå till WordPress adminpanelen**.
2. Klicka på **Elementor → Inställningar**.
3. Gå till fliken **Funktioner** (should be something like **"Funktioner"** or **"Features"**).
4. Leta efter **"Ytterligare anpassade brytpunkter"** (this is **"Additional Custom Breakpoints"** in Swedish).
5. Ändra till **"Aktiv"** (Active), och **spara ändringarna**.

—

### Sedan:
1. Gå till **Elementor → Webbplatsinställningar → Layout → Brytpunkter**
(English: **Site Settings → Layout → Breakpoints**)

2. Nu ska du se alla tillgängliga brytpunkter:
– Extra bred
– Bärbar dator (Laptop)
– Surfplatta (Tablet)
– Extra surfplatta
– Mobil
– Extra mobil

—

Let me know if you want to **switch Elementor to English temporarily** for easier configuration. I can guide you step-by-step for that too.

User

.opacity-icon-box.e-container–row.e-container {
display: grid
;
grid-template-columns: repeat(3, 1fr);
gap: 30px;

}

this has 5 cards so want 2 card in second row will come in center!

Assistant

To center the **2 cards** in the second row of your 5-card grid using CSS Grid, you can adjust the `grid-template-columns` and apply **auto-placement with centering logic** for incomplete rows.

Here’s how you do it:

—

### ✅ CSS Fix:

.opacity-icon-box.e-container--row.e-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center; /* Center individual items */
}

/* Optional: Make grid items a fixed width for consistent centering */
.opacity-icon-box.e-container--row.e-container > * {
  width: 100%; /* or a fixed width like 300px */
  max-width: 320px;
}

But this won’t center just the **last row** with 2 items.

—

### ✅ Ideal Fix: Center only the last row (2 items)

.opacity-icon-box.e-container--row.e-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.opacity-icon-box.e-container--row.e-container > * {
  flex: 1 1 calc(33.333% - 30px);
  max-width: calc(33.333% - 30px);
  box-sizing: border-box;
}

✅ This way:
– First row (3 cards) spans normally.
– Second row (2 cards) automatically aligns **centered**, due to `justify-content: center`.

—

Would you prefer this implemented using only Grid (no Flexbox)?

User

breakpoints: {
0: { slidesPerView: 1 },
600: { slidesPerView: 2 },
992: { slidesPerView: 2 },
1200: { slidesPerView: 3 },
2600: { slidesPerView: 4 }
}

after 1200 , I've to show 4 slides!

Assistant

To show **4 slides after 1200px**, just adjust the `breakpoints` so that `1200` directly sets `slidesPerView: 4`.

### ✅ Corrected `breakpoints` config:

breakpoints: {
    0:     { slidesPerView: 1 },
    600:   { slidesPerView: 2 },
    992:   { slidesPerView: 2 },
    1200:  { slidesPerView: 4 } // Show 4 slides at 1200px and above
}

> 💡 You don't need the `2600` breakpoint unless you want to **increase beyond 4 slides** for ultra-wide screens.

Let me know if you want to add spaceBetween or loop settings too.

User

breakpoints: {
0: { slidesPerView: 1 },
600: { slidesPerView: 2 },
992: { slidesPerView: 2 },
1200: { slidesPerView: 3 },
2600: { slidesPerView: 4 }
}

after 1200 , I've to show 4 slides!

till 0-600 :1
600-1024: 2
1024-1200 :3
1200-unlimited : 4

Assistant

To match your **intended responsive behavior** exactly with `Swiper.js` (or similar slider libraries), update your `breakpoints` like this:

—

### ✅ Corrected `breakpoints` Setup:

breakpoints: {
    0: { slidesPerView: 1 },           // 0–599px
    600: { slidesPerView: 2 },         // 600–1023px
    1024: { slidesPerView: 3 },        // 1024–1199px
    1200: { slidesPerView: 4 }         // 1200px and above
}

—

### 🔎 Explanation:
– `breakpoints` in Swiper are **“min-width” based**, not ranges.
– So:
– `600` applies from 600px and up until the next breakpoint (1024).
– `1024` takes over until `1200`.
– `1200` and above will show 4 slides.

This config achieves:

| Width Range | Slides |
|——————|——–|
| 0–599px | 1 |
| 600–1023px | 2 |
| 1024–1199px | 3 |
| 1200px and above | 4 |

Let me know if you need spacing or autoplay config too!

User

<script>

</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
            new Swiper('.industries-slider', {
                slidesPerView: 4,
                spaceBetween: 30,
                navigation: {
                    nextEl: '.industries-button-next',
                    prevEl: '.industries-button-prev',
                },
                loop: true,
                breakpoints: {
    0: { slidesPerView: 1 },          
   768: { slidesPerView: 2 },         
    1200: { slidesPerView: 3 },        
    1366: { slidesPerView: 4 }        
}

            });
        });
</script>

<style>
.industries-slider-wrapper {
            padding: 0;
            position: relative;
        }

        .industries-slider {
            padding-bottom: 130px;
        }

        .industries-slide-image {
            width: 100%;
            height: auto;
            border-radius: 6px;
        }

        .industries-button {
            position: absolute;
            bottom: 18px;
            left: 0;
            background: #fff;
            color: #000;
            padding: 28px 33px 27px 16px;
            border-radius: 0 50px 50px 0;
            font-size: 20px;
            font-weight: 500;
            min-width: 90%;
            overflow: hidden;
            z-index: 1;
            transition: color 0.3s ease;
        }

        .industries-button::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 16px;
            width: 50px;
            height: 4px;
            background: #f13d68;
            border-radius: 0 50px 50px 0;
            transition: all 0.4s ease;
            z-index: 0;
        }

        .industries-slide:hover .industries-button::before {
            width: 100%;
            height: 100%;
            border-radius: 0 50px 50px 0;
            left: 0px;
        }

        .industries-slide:hover .industries-button {
            color: #fff;
        }

        .industries-button span {
            position: relative;
            z-index: 2;
        }

        .industries-slider-navigation {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
        }

        .custom-arrow {
            background: transparent;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            border: none;
        }

        .custom-arrow svg {
            display: block;
        }
</style>

Assistant

To make your Elementor Swiper slider **fully responsive up to 1024px only**, and retain your existing design after that (as you've mentioned), you should adjust the `breakpoints` and apply a few style tweaks.

—

### ✅ Updated JS: Breakpoints Only Till 1024px
Change your Swiper init block to:

breakpoints: {
    0: { slidesPerView: 1 },
    480: { slidesPerView: 1.5 },
    600: { slidesPerView: 2 },
    768: { slidesPerView: 2.2 },
    992: { slidesPerView: 3 },
    1024: { slidesPerView: 3.2 }
}

> After 1024px, Swiper will **default to the `slidesPerView: 4`** from the main config since you're not specifying breakpoints beyond that.

—

### 🧽 Minor Style Enhancements for Responsiveness

Update your button style to allow it to adapt better on small screens:

@media (max-width: 1024px) {
  .industries-button {
    font-size: 16px;
    padding: 20px 24px 20px 12px;
    min-width: 80%;
  }

  .industries-slider {
    padding-bottom: 100px;
  }

  .industries-slider-navigation {
    bottom: 20px;
    gap: 10px;
  }

  .custom-arrow svg {
    width: 32px;
    height: 32px;
  }
}

—

### ✅ Summary of What This Does:
| Width (px) | Slides |
|————|——–|
| 0–479 | 1 |
| 480–599 | 1.5 |
| 600–767 | 2 |
| 768–991 | 2.2 |
| 992–1023 | 3 |
| 1024+ | 4 (default `slidesPerView`) |

Let me know if you want vertical stacking or swipe on touch under mobile!

User

.opacity-icon-box{
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}

.opacity-icon-box > * {
flex: 1 1 calc(33.333% – 30px);
max-width: calc(33.333% – 30px);
box-sizing: border-box;
}

make 2 for 600

make 1 for 480

Assistant

Here’s the fully responsive CSS based on your requirement using media queries:

—

### ✅ Updated Responsive Flexbox CSS:

.opacity-icon-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.opacity-icon-box > * {
    flex: 1 1 calc(33.333% - 30px);
    max-width: calc(33.333% - 30px);
    box-sizing: border-box;
}

/* 2 columns for screens ≤ 600px */
@media (max-width: 600px) {
    .opacity-icon-box > * {
        flex: 1 1 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }
}

/* 1 column for screens ≤ 480px */
@media (max-width: 480px) {
    .opacity-icon-box > * {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

—

### 💡 What This Does:

| Screen Width | Columns |
|——————|———|
| > 600px | 3 |
| 481px–600px | 2 |
| ≤ 480px | 1 |

Let me know if you want to add center-alignment or staggered animation effects as well.

User

<style>
.feedback-slider-track {
            position: relative;
            height: auto;
        }

        .feedback-section .elementor-widget {
            position: unset !important;
        }

        .feedback-slide-group {
            display: flex;
            gap: 30px;
            padding: 20px;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .feedback-box {
            flex: 1;
            background: #fff;
            padding: 30px 30px 0 30px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
        }

        .feedback-user {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .feedback-user-img {
            width: 56px;
            height: 56px !important;
            border-radius: 50% !important;
            margin-right: 10px;
            border: 2px solid #E9204F !important;
        }

        .feedback-pagination {
            position: absolute;
            right: 105px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 32px;
        }

        .feedback-pagination::before,
        .feedback-pagination::after {
            content: '';
            display: block;
            width: 1px;
            height: 85px;
            background-color: #fff;
            opacity: 0.5;
        }

        .feedback-pagination .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }

        .feedback-pagination .dot.active {
            background: #fff;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
        }

        .feedback-slide-group.active {
            opacity: 1;
            position: relative;
        }

        .user-inner-box {
            display: flex;
            align-items: center;
        }

        .user-inner-text {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-size: 18px;
            font-weight: 600;
            color: #000;
        }

        .feedback-text,
        span.user-title {
            color: #444;
        }
</style>

<script>
jQuery(document).ready(function ($) {
            var $groups = $('.feedback-slide-group');
            var current = 0;

            function showSlide(index) {
                $groups.removeClass('active').eq(index).addClass('active');
                $('.feedback-pagination .dot').removeClass('active').eq(index).addClass('active');
            }

            $('.feedback-pagination .dot').click(function () {
                var index = $(this).data('index');
                current = index;
                showSlide(index);
            });

            showSlide(0); // Initialize

            // ✅ Equal height logic
            function equalizeHeights() {
                var maxGroupHeight = 0;

                $groups.each(function () {
                    var $boxes = $(this).find('.feedback-box');
                    var maxBoxHeight = 0;

                    $boxes.css('height', 'auto'); // reset first

                    $boxes.each(function () {
                        var h = $(this).outerHeight();
                        if (h > maxBoxHeight) maxBoxHeight = h;
                    });

                    $boxes.css('height', maxBoxHeight + 'px');
                    $(this).css('height', maxBoxHeight + 40 + 'px'); // group height + padding
                    if (maxBoxHeight + 40 > maxGroupHeight) maxGroupHeight = maxBoxHeight + 40;
                });

                // Apply same height to all groups
                $groups.css('height', maxGroupHeight + 'px');
            }

            equalizeHeights();

            $(window).on('resize', function () {
                equalizeHeights();
            });
        });
</script>

Assistant

To make your custom **Elementor feedback widget** show:

– **1 slide per group (full width)** on **screens < 767px**
– **2 slides per group** on **767px and above**

You need to **dynamically chunk** the feedback items based on screen width and **re-chunk on resize**.

—

### ✅ Clean Fix Overview:
1. **Always render individual slides in HTML**
2. Use JavaScript to group them into visible chunks:
– Group of 1 on mobile
– Group of 2 on tablet and up
3. Toggle visibility by adding/removing `.active` class

—

### ✅ Step-by-step Changes:

#### 1. 🔁 Change PHP Rendering to Individual Slides:
Update this:

$groups = array_chunk($settings['feedback_list'], 2);
foreach ($groups as $group) {
    echo '<div class="feedback-slide-group">';
    foreach ($group as $item) {

To this:

foreach ($settings['feedback_list'] as $item) {
    echo '<div class="feedback-box">';
    // ...inner HTML
    echo '</div>';
}

#### 2. 🧠 Replace `.feedback-slide-group` logic with JS dynamic grouping

Below the `.feedback-slider-track`, add:

<div class="feedback-pagination"></div>

#### 3. ✅ Replace JS with fully dynamic chunk logic:

<script>
jQuery(document).ready(function ($) {
    const $track = $('.feedback-slider-track');
    const $pagination = $('.feedback-pagination');
    let current = 0;
    let groups = [];

    function chunkSlides() {
        const windowWidth = $(window).width();
        const perGroup = windowWidth < 767 ? 1 : 2;

        // Clear old
        $track.empty();
        $pagination.empty();
        groups = [];

        // Rebuild groups
        const $boxes = $('.feedback-box-original').clone();
        for (let i = 0; i < $boxes.length; i += perGroup) {
            const $group = $('<div class="feedback-slide-group"></div>');
            $group.append($boxes.slice(i, i + perGroup));
            $track.append($group);
            groups.push($group);
            $pagination.append(`<div class="dot" data-index="${groups.length - 1}"></div>`);
        }

        $('.feedback-pagination .dot').click(function () {
            const index = $(this).data('index');
            showSlide(index);
        });

        showSlide(0);
        equalizeHeights();
    }

    function showSlide(index) {
        $('.feedback-slide-group').removeClass('active').eq(index).addClass('active');
        $('.feedback-pagination .dot').removeClass('active').eq(index).addClass('active');
        current = index;
    }

    function equalizeHeights() {
        let maxHeight = 0;
        $('.feedback-slide-group').each(function () {
            let groupMax = 0;
            $(this).find('.feedback-box').css('height', 'auto').each(function () {
                groupMax = Math.max(groupMax, $(this).outerHeight());
            });
            $(this).find('.feedback-box').css('height', groupMax);
            if (groupMax > maxHeight) maxHeight = groupMax;
        });
        $('.feedback-slide-group').css('height', maxHeight + 40 + 'px');
    }

    // Move boxes into hidden original container for reuse
    $('.feedback-slider-track .feedback-box').wrap('<div class="feedback-box-original" style="display: none;"></div>');

    chunkSlides();
    $(window).on('resize', function () {
        chunkSlides();
    });
});
</script>

—

Would you like me to merge this directly into your widget code and return the full working file?

User

i want to rotate one image which is horizontal but I want it to be vertical now !

Assistant

To rotate a **horizontal image to vertical**, you can use **CSS transform** like this:

—

### ✅ CSS Rotation:

.rotated-image {
    transform: rotate(90deg); /* or -90deg if it rotates the wrong way */
    transform-origin: center center;
}

—

### ✅ HTML Example:

<img src="your-horizontal-image.jpg" class="rotated-image" alt="Rotated Image">

—

### 🧩 Bonus Tip (Fit inside container):
To prevent layout issues (like overflow), you can also add:

.rotated-image {
    transform: rotate(90deg);
    transform-origin: center center;
    display: block;
    max-width: 100%;
    height: auto;
}

If you want me to add it to your Elementor widget or rotate a specific image already rendered, just tell me the selector or upload the image.

User

.elementor-2513 .elementor-element.elementor-element-f568b47:not(.elementor-motion-effects-element-type-background), .elementor-2513 .elementor-element.elementor-element-f568b47 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-image: url(https://staging9.sveautveckling.se/wp-content/uploads/2025/05/Group-39.png);
background-repeat: no-repeat;
}

I want to rotate this bg image !

Assistant

To **rotate a background image in CSS**, you **cannot directly rotate it using `background-image`** itself — because `background-image` is not a DOM element. Instead, you need to apply the rotation to a container `::before` or an extra `div`.

Here are two solutions:

—

### ✅ **Solution A: Use `::before` pseudo-element to rotate background image**

Add this CSS:

.elementor-2513 .elementor-element.elementor-element-f568b47 {
    position: relative;
    overflow: hidden;
}

.elementor-2513 .elementor-element.elementor-element-f568b47::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-image: url('https://staging9.sveautveckling.se/wp-content/uploads/2025/05/Group-39.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(90deg) translate(-50%, -50%);
    transform-origin: center center;
    z-index: 0;
    pointer-events: none;
}

> 🔁 This will rotate the background image 90 degrees while keeping the original element's content untouched.

—

### ✅ **Solution B (Alternative): Use inline “ and rotate it**

If you control the content, use:

<img src="https://staging9.sveautveckling.se/wp-content/uploads/2025/05/Group-39.png" class="rotated-bg-img" alt="">

.rotated-bg-img {
    transform: rotate(90deg);
    transform-origin: center center;
    max-width: 100%;
}

—

Would you prefer this embedded directly in Elementor via custom CSS, or should I help you add it via Elementor’s "Custom CSS" panel?

User

.circle-grid::before {
content: '';
position: absolute;
top: 25%;
left: -64%;
background-image: url(https://staging9.sveautveckling.se/wp-content/uploads/2025/05/Group-39.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform: rotate(90deg) translate(-50%, -50%);
transform-origin: center center;
z-index: 0;
pointer-events: none;
}

i want to cover

but I want to manaze it !

i want show full image , but it will cover it full !

Assistant

To **show the full image while it visually fills the space**, you need to do **both**:

– Use `background-size: contain` (instead of `cover`)
– And control the width/height manually (because `contain` respects image proportions but won’t "cover" the full box unless sized properly)

—

### ✅ Corrected & Managed CSS:

.circle-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw; /* or specific size like 800px */
    height: 100vh; /* adjust this to control vertical span */
    background-image: url(https://staging9.sveautveckling.se/wp-content/uploads/2025/05/Group-39.png);
    background-size: contain; /* ✅ show full image */
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(90deg) translate(-50%, -50%);
    transform-origin: center center;
    z-index: 0;
    pointer-events: none;
}

—

### 📌 Key Adjustments:
– `background-size: contain` → ensures full image is visible
– `width` & `height` → control how much of the screen/section it takes
– `top: 50%; left: 50%` with `transform: translate(-50%, -50%)` → perfect centering

—

Would you like it to be **responsive to container size** or always **span the screen** regardless of container?

User

#pr-modal-section-d11cf96{
width:40%;
margin:auto;
}

this is my modal , I want when someone open it it will have some background with opacity!

Assistant

To create a **modal with a background overlay** (semi-transparent), you need to:

1. Add a **full-screen background overlay** behind the modal
2. Give it a dark background with opacity (e.g., `rgba(0,0,0,0.6)`)
3. Make sure the modal sits **above** the overlay

—

### ✅ CSS Structure:

#### 🔹 Modal Overlay (background with opacity)

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
    z-index: 999; /* behind modal */
}

#### 🔹 Your Modal

#pr-modal-section-d11cf96 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    background: white;
    z-index: 1000; /* above overlay */
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

—

### ✅ HTML Example (Structure)

<div class="modal-overlay" id="modalOverlay"></div>

<div id="pr-modal-section-d11cf96">
    <!-- Modal content here -->
</div>

—

### ✅ Optional JS to Show/Hide Modal

// Show modal
document.getElementById('modalOverlay').style.display = 'block';
document.getElementById('pr-modal-section-d11cf96').style.display = 'block';

// Hide modal on overlay click
document.getElementById('modalOverlay').addEventListener('click', function () {
    this.style.display = 'none';
    document.getElementById('pr-modal-section-d11cf96').style.display = 'none';
});

Let me know if your modal is already being controlled by Elementor or JS and I’ll integrate this overlay behavior into it.

Increase Elementor Breakpoints

Leave a Comment Cancel