User make a widget in elementor where we have option to have this kind of design one big image and second which is the vector , which look like this ! and the design will be sam , most importantly make it fully responsive and best ! Assistant To create a fully responsive Elementor widget […]
User @media (max-width:767px){ .feedback-pagination::before, .feedback-pagination::after { content: ''; display: block; width: 50px !important; height: 2px !important; background-color: #fff; opacity: 0.5; } .feedback-pagination { position: absolute; top: unset !important; bottom: 70PX; transform: translateY(0); display: flex ; flex-direction: row; align-items: center; gap: 20PX; } } I want to set this properly ! horizontally in middle Assistant To […]
User <script> </script> <style> @media (max-width: 767px) { .mobile-steps-slider-wrapper { padding: 40px 0; } .step-item { position: relative; text-align: center; } .step-outer::before { content: ""; position: absolute; top: -8.5px; left: 50%; transform: translateX(-50%); background-color: #e9204f !important; } .step-outer { width: 218px; height: 224px; border-radius: 50%; position: relative; margin: auto; border: 4px solid #E9204F80; display: flex; […]
User jQuery(document).ready(function($) { if (window.innerWidth Assistant You can adjust the `items` setting using Owl Carousel's **responsive** configuration instead of a fixed `items` value. Here's the corrected version of your script: jQuery(document).ready(function($) { if (window.innerWidth <= 767) { $('#mobile-steps-carousel').owlCarousel({ loop: true, margin: 20, nav: false, dots: true, responsive: { 0: { items: 1 }, 500: { […]
User if we want to create this design in elemntor than what to do ? how to make it most responsive and all ! Assistant To recreate this **"About Us" section design** from your image in **Elementor** with **full responsiveness and clean layout**, follow these step-by-step instructions: — ### 🧱 Structure Setup in Elementor #### […]
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, […]
User <style> .feedback-slider-track { position: relative; height: auto; } .feedback-section .elementor-widget { position: unset !important; } .feedback-slide-group { display: flex; gap: 30px; 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: […]
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 […]
User <style> .feedback-slider-track { position: relative; height: auto; } .feedback-section .elementor-widget { position: unset !important; } .feedback-slide-group { display: flex; gap: 30px; 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: […]
User create swiper slider for attahced that will work till 767 media put all code in elementor widget widget will have image,text repeatwer field Assistant Here's a full Elementor widget code that creates a **Swiper slider** (mobile-only up to 767px) using repeater fields for **image and text**—just like your reference image. It includes the necessary […]