Life Log

新潟在住。衣食住、仕事、遊び、新潟情報など、個人の話も交えてコツコツ書いています。

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

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

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


 - WEB, ワードプレス