WordPress テーマ「luxeritas」にてヘッダー下ウィジェットでカルーセルスライダーを入れると横幅がずれる件

2021年7月13日ワードプレス

WordPress テーマ「luxeritas」を愛用しているのですが
「luxeritas」に搭載されているウィジェットに
とてもいい感じの「カルーセルスライダー」があります。

 

掲載位置的に「ヘッダー下ウィジェット」あたりに
入れることが多いかと思いますが
そこに入れると規格範囲を超えて
右側が枠外へと飛び出して
デザインが崩れる不具合が発生しました。

 

色々解決策を探してみたのですが
類似ケースが見当たらなかったので
CSSをいじって自身で解決しましたので
参考にしていただけたらと思います。

 

その方法は、
「外観＞カスタマイズ＞追加CSS」に
以下コードを入れるだけです。

 

.swiper-container.swiper-container-initialized.swiper-container-horizontal.swiper-container-free-mode{
	width:100%;
}

 

これを入れることで
上位DIVタグの横幅に強制的に合わせることができるため

自動調整されます。