1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved Visual Builder preview vs. published page: why different?

Discussion in 'Free Divi Community Forum' started by JasonDivi, Jul 5, 2019.

  1. JasonDivi

    JasonDivi New Member

    Hello, and thanks in advance for the help!

    I have been working with Divi for 3 years. Every once in a while, this problem occurs, and I can't determine the cause/solution.

    PROBLEM:
    My saved version of the page in the visual builder looks perfect. However, when I view the published page, critical CSS features are often missing. In this particular case, the bottom border of a module is displaying its customized pattern in the visual builder, but not on the live/public page. Please see the side-by-side comparison in my attached screenshot.

    For reference, here is the custom CSS of the module (Module Settings > Text Settings > Advanced > Custom CSS > After):
    Code:
    bottom: -1px /*Eliminate unwanted border line*/ !IMPORTANT;
    content: '' !IMPORTANT;
    position: absolute !IMPORTANT;
    /* background: #0069ba !IMPORTANT; */
    
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEyODAgMy40QzEwNTAuNTkgMTggMTAxOS40IDg0Ljg5IDczNC40MiA4NC44OWMtMzIwIDAtMzIwLTg0LjMtNjQwLTg0LjNDNTkuNC41OSAyOC4yIDEuNiAwIDMuNFYxNDBoMTI4MHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAyNC4zMWM0My40Ni01LjY5IDk0LjU2LTkuMjUgMTU4LjQyLTkuMjUgMzIwIDAgMzIwIDg5LjI0IDY0MCA4OS4yNCAyNTYuMTMgMCAzMDcuMjgtNTcuMTYgNDgxLjU4LTgwVjE0MEgweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0xMjgwIDUxLjc2Yy0yMDEgMTIuNDktMjQyLjQzIDUzLjQtNTEzLjU4IDUzLjQtMzIwIDAtMzIwLTU3LTY0MC01Ny00OC44NS4wMS05MC4yMSAxLjM1LTEyNi40MiAzLjZWMTQwaDEyODB6Ii8+PC9nPjwvc3ZnPg==) !IMPORTANT;
    
    background-size: 100% 35px !IMPORTANT;
    height: 35px !IMPORTANT;
    left: -1px /*Eliminate unwanted border line*/ !IMPORTANT;
    right: -1px /*Eliminate unwanted border line*/ !IMPORTANT;
    border:0 !IMPORTANT;
    outline:0 !IMPORTANT;
    /*transform:rotate(180deg) !IMPORTANT;*/
    /*scale(1.3,1.9)*/
    
     

    Attached Files:

    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    I tested your code & it works fine on live page. Kindly share your URL.
     
  3. JasonDivi

    JasonDivi New Member

    It's a client's private testing URL, so I've added "[REMOVE]" to it:

    https://www.abortion[REMOVE]essay.com/contentauditors/articles/
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Go to your Text module settings > Advanced > Custom CSS > Main Element & add position: relative!important;
     
  5. JasonDivi

    JasonDivi New Member

    That worked! You rule the universe! Thanks so much!

    Now I'll have to find something to buy in your shop! ;)
     
    Divi.Help likes this.
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More