Title: CSS Generation Issue with Tablet version Last modified: April 23, 2018 --- # CSS Generation Issue with Tablet version * Resolved [Sourabh Agrawal](https://wordpress.org/support/users/sourabhasct/) * (@sourabhasct) * [8 years, 1 month ago](https://wordpress.org/support/topic/css-generation-issue-with-tablet-version/) * I have created the header and footer using frontend editor. The desktop version looks good. The table and mobile version also look good in the editor, but on the front end, the table version is not working and this is because of the desktop version is using CSS breakpoint – min-width:768px after the CSS of the tablet version. * 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%; } } ``` * Is there something I can do until the further version release that fix this issue? Viewing 5 replies - 1 through 5 (of 5 total) * [Nikhil Chavan](https://wordpress.org/support/users/nikschavan/) * (@nikschavan) * [8 years, 1 month ago](https://wordpress.org/support/topic/css-generation-issue-with-tablet-version/#post-10208609) * Hello [@sourabhasct](https://wordpress.org/support/users/sourabhasct/), * It would be better to ask this question to Elementor’s support as this plugin just loads multiple layouts from Elementor. The CSS generation etc is done by Eliminator itself. * Using this plugin is like loading multiple shortcodes using Elementor on a page. * Thread Starter [Sourabh Agrawal](https://wordpress.org/support/users/sourabhasct/) * (@sourabhasct) * [8 years, 1 month ago](https://wordpress.org/support/topic/css-generation-issue-with-tablet-version/#post-10213343) * Hi Nikhil, * Actually, before submitting my problem here, I have posted this concern on the Elementor plugin support team but did not get any feedback so thought your team may help me to resolve this. * Did anyone else face this issue before? * [Nikhil Chavan](https://wordpress.org/support/users/nikschavan/) * (@nikschavan) * [8 years, 1 month ago](https://wordpress.org/support/topic/css-generation-issue-with-tablet-version/#post-10234384) * Hi [@sourabhasct](https://wordpress.org/support/users/sourabhasct/), * Can you tell me if the CSS that is causing this problem, it is auto generated CSS from Elementor or something that you have added as custom CSS? * Thread Starter [Sourabh Agrawal](https://wordpress.org/support/users/sourabhasct/) * (@sourabhasct) * [8 years, 1 month ago](https://wordpress.org/support/topic/css-generation-issue-with-tablet-version/#post-10265976) * Hi Nikhil, * First of all Thanks for your reply. Unfortunately, I missed the email alert of this thread and that’s why did not reply on-time. * Yes. The CSS I paste in my original thread is an autogenerated CSS. * I tried to update it manually to fix this issue. But whenever I work again on the page, the CSS generator will again change the position of the blocks and the responsive layout will stop working. * Not sure where is the gap? Or Am I the only person who got this issue. * If you want to access the website to troubleshoot the issue, please let me know so, I can provide you with the safe access. * Plugin Author [Brainstorm Force](https://wordpress.org/support/users/brainstormforce/) * (@brainstormforce) * [8 years ago](https://wordpress.org/support/topic/css-generation-issue-with-tablet-version/#post-10281648) * [@sourabhasct](https://wordpress.org/support/users/sourabhasct/) — Will be really great if you could lodge a support ticket from our website: [https://wpastra.com/contact](https://wpastra.com/contact) * It’s easier to keep track and debug problems that way 🙂 Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘CSS Generation Issue with Tablet version’ is closed to new replies. * ![](https://ps.w.org/header-footer-elementor/assets/icon-256x256.gif?rev=3278750) * [Ultimate Addons for Elementor](https://wordpress.org/plugins/header-footer-elementor/) * [Frequently Asked Questions](https://wordpress.org/plugins/header-footer-elementor/#faq) * [Support Threads](https://wordpress.org/support/plugin/header-footer-elementor/) * [Active Topics](https://wordpress.org/support/plugin/header-footer-elementor/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/header-footer-elementor/unresolved/) * [Reviews](https://wordpress.org/support/plugin/header-footer-elementor/reviews/) * 5 replies * 3 participants * Last reply from: [Brainstorm Force](https://wordpress.org/support/users/brainstormforce/) * Last activity: [8 years ago](https://wordpress.org/support/topic/css-generation-issue-with-tablet-version/#post-10281648) * Status: resolved