はるまるBlog

新潟で趣味系アイテムの企画販売をしている個人事業主のブログです。生活、趣味、仕事、遊び、食べ物、その他いろいろを綴っています。

NEW ARTICLE
個人的に新潟市内で一番好きなスパイスカレー 江南区インド料理レストラン「Mayaa マヤァ」
  • WooCommerce 商品ページギャラリー スマホレイアウト崩れの修正方法

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

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

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