Support » Plugin: Elementor Page Builder » Tablet version is not working

  • Resolved Sourabh Agrawal

    (@sourabhasct)


    This is my first day of using Elementor It seems like a very good tool to create the website but I am stuck in one section. I have created a layout section using frontend editor. The desktop version looks good. The table and mobile version also looks good in the editor. but on the front end, table version is not working.

    I have investigated further and found that on the CSS (generated for that layout) have an issue. It loads table version before and then overrides the CSS elements with the desktop version. As you can see in below code. The Line from 143 to 162 should be before line number 116. Not sure how can fix this. I have updated the CSS manually but when I change few sections it again generates the CSS with the same issue. Please help me to fix this. Here is the code.

    .elementor-4 .elementor-element.elementor-element-414cd1f.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-414cd1f > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
        margin-bottom: 0px;
    }
    
    .elementor-4 .elementor-element.elementor-element-ee9f1ea.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-ee9f1ea > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
        margin-bottom: 0px;
    }
    
    .elementor-4 .elementor-element.elementor-element-d536f80 {
        text-align: left;
    }
    
    .elementor-4 .elementor-element.elementor-element-d536f80 .elementor-image img {
        width: 400px;
    }
    
    .elementor-4 .elementor-element.elementor-element-fde6cd2.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-0633ae3 .elementor-text-editor {
        text-align: left;
    }
    
    .elementor-4 .elementor-element.elementor-element-0633ae3 {
        font-family: "Poppins", Sans-serif;
        font-size: 15px;
        font-weight: 500;
    }
    
    .elementor-4 .elementor-element.elementor-element-b1273ee.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-b1273ee > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
        margin-bottom: 5px;
    }
    
    .elementor-4 .elementor-element.elementor-element-e4e4262 .elementor-text-editor {
        text-align: left;
    }
    
    .elementor-4 .elementor-element.elementor-element-e4e4262 {
        font-family: "Poppins", Sans-serif;
        font-size: 15px;
        font-weight: 500;
    }
    
    .elementor-4 .elementor-element.elementor-element-8a6bfc6.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-8a6bfc6 > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child) {
        margin-bottom: 5px;
    }
    
    .elementor-4 .elementor-element.elementor-element-a472722 .elementor-text-editor {
        text-align: left;
    }
    
    .elementor-4 .elementor-element.elementor-element-a472722 {
        font-family: "Poppins", Sans-serif;
        font-size: 15px;
        font-weight: 500;
    }
    
    .elementor-4 .elementor-element.elementor-element-50f8fab.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-0e21c4d .elementor-text-editor {
        text-align: left;
    }
    
    .elementor-4 .elementor-element.elementor-element-0e21c4d {
        font-family: "Poppins", Sans-serif;
        font-size: 15px;
        font-weight: 500;
    }
    
    .elementor-4 .elementor-element.elementor-element-d84fe72.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-a182dfe .elementor-text-editor {
        text-align: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-a182dfe {
        font-family: "Poppins", Sans-serif;
        font-size: 10px;
        text-transform: uppercase;
    }
    
    .elementor-4 .elementor-element.elementor-element-a182dfe > .elementor-widget-container {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    
    .elementor-4 .elementor-element.elementor-element-3e11310.elementor-column .elementor-column-wrap {
        align-items: center;
    }
    
    .elementor-4 .elementor-element.elementor-element-2d2a985 > .elementor-widget-container {
        border-radius: 1px 0px 1px 0px;
    }
    
    @media(max-width:1024px) and (min-width:768px) {
        .elementor-4 .elementor-element.elementor-element-ee9f1ea {
            width: 50%;
        }
        .elementor-4 .elementor-element.elementor-element-fde6cd2 {
            width: 15%;
        }
        .elementor-4 .elementor-element.elementor-element-b1273ee {
            width: 15%;
        }
        .elementor-4 .elementor-element.elementor-element-8a6bfc6 {
            width: 15%;
        }
        .elementor-4 .elementor-element.elementor-element-50f8fab {
            width: 98%;
        }
        .elementor-4 .elementor-element.elementor-element-d84fe72 {
            width: 2%;
        }
    }
    
    @media(max-width:1024px) {
        .elementor-4 .elementor-element.elementor-element-0e21c4d .elementor-text-editor {
            text-align: center;
        }
    }
    
    @media(min-width:768px) {
        .elementor-4 .elementor-element.elementor-element-ee9f1ea {
            width: 39.042%;
        }
        .elementor-4 .elementor-element.elementor-element-fde6cd2 {
            width: 10.319%;
        }
        .elementor-4 .elementor-element.elementor-element-b1273ee {
            width: 9.756%;
        }
        .elementor-4 .elementor-element.elementor-element-8a6bfc6 {
            width: 10.063%;
        }
        .elementor-4 .elementor-element.elementor-element-50f8fab {
            width: 24.85%;
        }
        .elementor-4 .elementor-element.elementor-element-d84fe72 {
            width: 5.962%;
        }
    }
    
    @media(max-width:767px) {
        .elementor-4 .elementor-element.elementor-element-fde6cd2 {
            width: 33%;
        }
        .elementor-4 .elementor-element.elementor-element-b1273ee {
            width: 33%;
        }
        .elementor-4 .elementor-element.elementor-element-8a6bfc6 {
            width: 33%;
        }
        .elementor-4 .elementor-element.elementor-element-50f8fab {
            width: 70%;
        }
    }

    I have generated a blank theme by Underscore.js So this is also not a theme conflict.

    Please help.

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Tablet version is not working’ is closed to new replies.