はるまるBlog

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

NEW ARTICLE
久しぶりにラジコン（京商プラズマMKⅢ）買いました。
  • 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; }

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

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