Ненастроенный элемент пробела в мобильной версии

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;
  }
}

Попробуйте добавить это к вашей теме style.css