WooCommerce 商品ページギャラリー スマホレイアウト崩れの修正方法

WooCommerce 商品ページギャラリー スマホレイアウト崩れの修正方法

WooCommerceの商品ページをスマートフォンで見ると上の写真のように、3と4のサムネイル画像がくっついてしまいます。

このレイアウト崩れを修正するにはCSSに以下のコードを追記します。

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2), .woocommerce-page div.product div.images .woocommerce-product-gallery__image:nth-child(n+2), .woocommerce #content div.product div.images .woocommerce-product-gallery__image:nth-child(n+2), .woocommerce-page #content div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
{margin: 10px 5px 0 0px; }

これでレイアウト崩れが直るはずです。

ので、試してみてはいかがでしょうか。