お問い合わせ

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

Man in Black Shirt and Gray Denim Pants Sitting on Gray Padded Bench

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

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

問題が起きる条件

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

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

修正のためのCSS

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

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

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

.p-blogCard__body a{
    word-break: break-all;
}
他の人にもシェアしてね
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次