SWELLのブログカードがスマホで画面からはみ出る！解決策はコレです。

SWELLのブログカードを使っていて、スマホで見た時にブログカードがスマホ画面からはみ出してしまう現象がありました。

つまり、SWELLのブログカードは、レスポンシブ対応が上手くいってません。

問題が起きる条件

その問題が起きる条件は、ブログカードのタイトルにURLやパスが入っている時です。

SWELLは、URLやパスを途中で折り返すことを禁止しており、表示画面が狭くなるとブログカードが画面からはみ出てしまいました。

修正のためのCSS

解決するには、自分でCSSを追加する必要があります。

ブログカードのaタグに以下のスニペットを追加すれば、画面からはみ出ることは無くなります。

追加するのは追加CSSでもいいですし、子テーマのstyle.cssでもよいです。

.p-blogCard__body a{
    word-break: break-all;
}