1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Padding and margin in woocommerce

Discussion in 'Free Divi Community Forum' started by antredemondes, Nov 3, 2020.

  1. antredemondes

    antredemondes New Member

    Hello

    I'm not sure if my question is a Divi question, or a Woocommerce one. Since I'm using both ...

    Here is the issue : I'm trying to customize a Woocommerce product presentation. To do that, I need to build several blocks and sections in the product description.
    For that specific section, since I couldn't manage to do something nice using tables, I decided to build a Divi page, and then copy/paste the html code (which I get by making a right click on the page) in the product description I want to customize.

    This works almost perfectly ... the only thing that is not working is the spacing (top and bottom) of that piece of description I made.

    Just to be clear : if I go to the page I built on Divi, the paddings and margins have been set to zero, so I don't have unwanted spacing. You can see the page here https://antredemondes.fr/description-example/
    And if you have a look, you'll notice there is no spacing between the end of the description and the last grey block at the bottom of the page.

    Now, if I copy paste the html code directly to the field used to customize a product description, here is what I get https://antredemondes.fr/produit/mollo-lescargot-copie/
    There is a huge spacing just before the section "Découvrez également" starts (that's the "You may also like" section - all the website is in French, sorry for that). I don't want that space.
    I've already tried to play with the margins and paddings of each block using the template builder, but in that specific case, that doesn't make any difference. It's like the padding and margin options are "locked" by the piece of code I copy/pasted from the page I created using Divi.

    I'm not good enough to understand the details of what I have copy/pasted. I tried to have a look into the details of the code, but couldn't fin anything that is related to margins or padding.
    Although when I created the Divi page, I set all the margins and padding to zero.
    It looks to me like the margin and padding settings are not inside the piece of code I've copy/pasted ... and I have no clue what I should add to that code to specify that I want zero padding nor margin.

    Here is the piece of code I've copied from the Divi page and pasted in my product description field :
    HTML:
    <div id="main-content">
    <article id="post-10312" class="post-10312 page type-page status-draft hentry">
    <div class="entry-content">
    <div id="et-boc" class="et-boc">
    <div class="et-l et-l--post">
    <div class="et_builder_inner_content et_pb_gutters3">
    <div class="et_pb_section et_pb_section_0 et_section_regular">
    <div class="et_pb_row et_pb_row_0">
    <div class="et_pb_column et_pb_column_1_3 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough">
    <div class="et_pb_module et_pb_image et_pb_image_0"><span class="et_pb_image_wrap "><img class="wp-image-10206" title="Icone_rapide" src="https://antredemondes.fr/wp-content/uploads/2020/11/Icone_rapide.png" sizes="(max-width: 300px) 100vw, 300px" srcset="https://antredemondes.fr/wp-content/uploads/2020/11/Icone_rapide.png 300w, https://antredemondes.fr/wp-content/uploads/2020/11/Icone_rapide-150x150.png 150w, https://antredemondes.fr/wp-content/uploads/2020/11/Icone_rapide-100x100.png 100w" alt="" width="auto" height="auto" /></span></div>
    <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <p style="text-align: center;"><strong>Rapide à mettre en place</strong></p>
    </div>
    </div>
    <p><!-- .et_pb_text --></p>
    <div class="et_pb_module et_pb_text et_pb_text_1 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <p style="text-align: center;">Très facile à balader et à installer, Mollo l’escargot se prend en main très rapidement, pour tout de suite profiter du fun d’une ou plusieurs parties</p>
    </div>
    </div>
    <p><!-- .et_pb_text --></p>
    </div>
    <p><!-- .et_pb_column --></p>
    <div class="et_pb_column et_pb_column_1_3 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough">
    <div class="et_pb_module et_pb_image et_pb_image_1"><span class="et_pb_image_wrap "><img class="wp-image-10208" title="Icone_smart kid" src="https://antredemondes.fr/wp-content/uploads/2020/11/Icone_smart-kid.png" sizes="(max-width: 300px) 100vw, 300px" srcset="https://antredemondes.fr/wp-content/uploads/2020/11/Icone_smart-kid.png 300w, https://antredemondes.fr/wp-content/uploads/2020/11/Icone_smart-kid-150x150.png 150w, https://antredemondes.fr/wp-content/uploads/2020/11/Icone_smart-kid-100x100.png 100w" alt="" width="auto" height="auto" /></span></div>
    <div class="et_pb_module et_pb_text et_pb_text_2 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <p style="text-align: center;"><strong>Participe au développement de l’enfant</strong></p>
    </div>
    </div>
    <p><!-- .et_pb_text --></p>
    <div class="et_pb_module et_pb_text et_pb_text_3 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <p style="text-align: center;"><em>Le jeu est le travail de l’enfant.</em> Ce n’est pas de nous, mais de Jean Château, un éminent psychologue en sciences de l’éducation. Avec son système asymétrique (arriver le dernier à une course), Mollo l’escargot va entraîner vos enfants à faire preuve d’astuce et d’anticipation</p>
    </div>
    </div>
    <p><!-- .et_pb_text --></p>
    </div>
    <p><!-- .et_pb_column --></p>
    <div class="et_pb_column et_pb_column_1_3 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough et-last-child">
    <div class="et_pb_module et_pb_image et_pb_image_2"><span class="et_pb_image_wrap "><img class="wp-image-10207" title="Icone_famille" src="https://antredemondes.fr/wp-content/uploads/2020/11/Icone_famille.png" sizes="(max-width: 300px) 100vw, 300px" srcset="https://antredemondes.fr/wp-content/uploads/2020/11/Icone_famille.png 300w, https://antredemondes.fr/wp-content/uploads/2020/11/Icone_famille-150x150.png 150w, https://antredemondes.fr/wp-content/uploads/2020/11/Icone_famille-100x100.png 100w" alt="" width="auto" height="auto" /></span></div>
    <div class="et_pb_module et_pb_text et_pb_text_4 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <p style="text-align: center;"><strong>Amusant pour toute la famille !</strong></p>
    </div>
    </div>
    <p><!-- .et_pb_text --></p>
    <div class="et_pb_module et_pb_text et_pb_text_5 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <p style="text-align: center;">Même si l’univers est enfantin, on a là un jeu dont les mécanismes sauront ravir également les plus grands. Coups de trafalgar et rebondissements de dernière minute sont au rendez-vous !</p>
    </div>
    </div>
    <p><!-- .et_pb_text --></p>
    </div>
    <p><!-- .et_pb_column --></p>
    </div>
    <p><!-- .et_pb_row --></p>
    <div class="et_pb_row et_pb_row_1">
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_3 et_pb_css_mix_blend_mode_passthrough et-last-child">
    <div class="et_pb_module et_pb_code et_pb_code_0">
    <div class="et_pb_code_inner"><iframe src="https://www.youtube.com/embed/lrtXZp2ub8A" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    </div>
    </div>
    <div class="et_pb_row et_pb_row_2">
    <div class="et_pb_column et_pb_column_4_4 et_pb_column_4 et_pb_css_mix_blend_mode_passthrough et-last-child">
    <div class="et_pb_module et_pb_text et_pb_text_6 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <h2 style="text-align: center;"><span style="color: #ff6600;">Description</span><span style="color: #ff6600;"> de l’éditeur</span></h2>
    </div>
    </div>
    <p><!-- .et_pb_text --></p>
    <div class="et_pb_module et_pb_text et_pb_text_7 et_pb_text_align_left et_pb_bg_layout_light">
    <div class="et_pb_text_inner">
    <p style="text-align: left;">Rien ne sert de courir… Ne vous pressez pas, et vous serez les premiers ! Cette règle ne s’applique jamais mieux qu’au sein d’une course d’escargots. Pour gagner, devenez coach, enseignez à votre escargot à être le plus lent et à rester le plus longtemps possible dans le potager. Alors, à vos marques : prêts ? Traînez ! Un jeu pour enfant basé sur l’ingéniosité et la logique paradoxale, avec des éléments 3D. Il développe la pensée créative et enseigne une stratégie bien utile : comment ralentir pour gagner ?<br />
    Retrouvez la page de l'éditeur <a href="https://www.gigamic.com/jeu/mollo-lescargot" target="_blank">ici</a></p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </article>
    </div>
    I've been driven crazy with this issue for the past two days. I really hope someone can help me.
    Don't hesitate to let me know if I wasn't clear enough when I described the issue

    Thanks
    Loïc
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    The HTML code doesn't include CSS. That's why the padding is still there.

    You may want to try to use this Divi shortcode plugin instead: https://wordpress.org/plugins/simple-divi-shortcode/
    **Save your layout in Divi Library & use shortcode to display it in the Woocommerce description text.