title: Unconfigured spacing element in mobile version
body: <p>I put an image to appear on every page of my product, that image was not predefined in the layout I bought. I was able to configure the desktop version to appear correctly, but in the mobile version the element overlaps with other elements.</p>
  
  <p>The page in question is:</p>
  
  <p><a href="https://cozinhasemculpa.com.br/produto/casadito-branco/" rel="nofollow noreferrer">https://cozinhasemculpa.com.br/produto/casadito-branco/</a></p>
  
  <p>Code that I used:</p>
  
  <pre><code>/**
  * @snippet  Add Content Below the Gallery Images @ WooCommerce Single Product
  * @how-to   Watch tutorial @ https://businessbloomer.com/?p=19055
  * @sourcecode   https://businessbloomer.com/?p=75204
  * @author   Rodolfo Melogli
  * @testedwith   WooCommerce 3.4.3
  */
  
  // Note 1: this works on Storefront theme, might need customization for other themes
  // Note 2: class "woocommerce-product-gallery" is vital for inheriting CSS float, margins and widths
  
  add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );
  
  function bbloomer_add_below_prod_gallery() {
      echo '&lt;div class="woocommerce-product-gallery images teste" style="margin-top: -140px;"&gt;';
      echo '&lt;span&gt;&lt;img src="http://cozinhasemculpa.com.br/wp-content/uploads/2019/02/CSC_ProdutosIcones1.jpg" title="CozinhaSemCulpa_Produtos" alt="http://cozinhasemculpa.com.br/wp-content/uploads/2019/02/CSC_ProdutosIcones1.jpg"&gt;&lt;/span&gt;';
      echo '&lt;/div&gt;';
  }
  </code></pre>