移动版本中未配置的间距元素

Question

我在产品的每个页面上都显示了一个图像，该图像在我购买的布局中没有预定。我能够配置桌面版本以正确显示，但是在移动版本中，元素与其他元素重叠。

所讨论的页面是：

https://cozinhasemculpa.com.br/produto/casadito-branco/

我使用的代码：

/**
* @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 '<div class="woocommerce-product-gallery images teste" style="margin-top: -140px;">';
    echo '<span><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"></span>';
    echo '</div>';
}

Answer 1

@media only screen and (max-width: 600px) {
 .teste{
    width: 25px;
  }
}

尝试将其添加到您的主题样式.css