スマホでの表示が崩れてしまいました

Snow Monkey v19 で行間・文字サイズ・余白のバランスを根本から見直したので、その辺りに影響がでてしまうことはあると思います。

サイトを軽く拝見して気づいたのは、スマホだとコンテンツが画面幅からはみ出してしまっている点です。これは今日マイナーアップデートをリリースする予定で、それで改善されます。

他の部分で、ここをこう戻したいというのがあれば確認するので、具体的にここをこうというのをリストアップしてみていただければと思います。

キタジマ タカシ様

いつもお世話になっております。早急なアップデート対応・情報共有ありがとうございます。
スマホでの表示崩れについて、こちらも合わせてご確認・ご対応いただけますと幸いです。

【お使いの Snow Monkey のバージョン】19.0.0
【お使いの Snow Monkey Blocks のバージョン】18.0.0
【お使いの Snow Monkey Editor のバージョン】9.1.1
【お使いのブラウザ】chrome. safari
【当該サイトのURL】https://element-gym.com/

### 発生している問題

スマホで見た際に、一部コンテンツの幅が狭くなり（両端余白が大きい）表示崩れしております。
おそらく、SNOW MONKEY BLOCKS [共通ブロック]のコンテナーブロックを使用している箇所（max-width設定）かと思います。

よろしくお願いいたします。

キタジマ様
情報少なく、失礼いたしました。

[アップデート後（余白大きい）]と[アップデート前（余白小さい）]のスクリーンショットを添付いたしました。
同じ現象が多数出ておりますが、例として２つあげております。

アップデート前のイメージは検証ツールで調整したものですので、両端余白の値は実際のものとは異なりますが、イメージとしてはスクショような感じでした。

何卒、よろしくお願いいたします。

[アップデート後]

[アップデート前]

JKDECOR さん
ありがとうございます！
トップページの HTML 構造、ちゃんと最新版になっているみたいです。

文字サイズ等の調整について、CSS を書いてみました。ブラウザのサイズが 639px 以下のときに適用されます。必要に応じて調整してください。

@media (max-width: 639px) {
    .c-container {
        --_container-margin: calc(var(--_s1) * .5);
    }

    .c-entries {
        --entries--gap: calc(var(--_margin1) * .5);
    }

    .c-entry-summary__title {
        font-size: 1rem;
    }

    .c-entry-summary__content {
        color: var(--wp--preset--color--sm-dark-gray);
        font-size: .75rem;
    }

    .smb-section__title {
        font-size: 1.5rem;
    }

    .c-entry-summary__term {
        font-size: .75rem;
    }
}

いつも教えていただく度に追加CSSやMySnowMonkeyに色々追加しているので
もう何がどこの部分に関わっているのか分からない状態です。

なるべくコメントを入れるようにしたほうが良いと思います。web を受託制作しているような方でも（もちろん僕でも）このコードなんだっけ？となるので笑
ただ、追加 CSS はなぜかコメントを入れていると正しく動かなくなる場合があるみたいなので、もしそうなったときは My Snow Monkey プラグインの中に CSS ファイルを作成して読み込むような形に変更する必要があるかもしれません。

一度リセットして一から調整した方がいいのでしょうか？

本当はそうしたほうが管理面や速度面、意図せぬ不具合が発生しにくいという面でも良いとは思いますが、JKDECOR さんが CSS を理解して整理しないと難しいかもしれません。もし知り合いに CSS や WordPress に理解がある方がいらっしゃるのであれば、そのような方にお願いしてみるのがベストかなと思います。

今後も長く使っていきたいブログで
常に最新の状態を保っておきたいのでアップデートしても
今後影響があまり出ないようにしたいです。

なるべく影響がでないようにアップデート作業をしているつもりなのですが、どうしても（ミス、意図的によらず）多少影響はでてしまいます。これは Snow Monkey に限らず WordPress でもそうで、Snow Monkey のアップデートで WordPress の変更の影響が出ないような調整もおこなっています。基本的に CSS や PHP などのコードを書いてのカスタマイズについては、書けば書くだけどうにでもできてしまうものなのでこちらで完全に動作保証することはできません。どうしても自己責任となってしまうので、コードにはなるべくコメントを書く、CSS を書くときは詳細度に気をつける、なるべく書かないようにする、という配慮をすることが影響がでにくくなるコツかなと思います。

キタジマ様

リリース内容に書いていただいている内容で、失礼しました。ありがとうございます！

基本デザイン設定で設定を「狭め」に変更しましたが、以前より狭くならなかったため、下記の追加CSSを記載・調整して、解決いたしました。ありがとうございました。

@media (max-width: 639px){
.smb-container{
padding-left: 0;
padding-right: 0;
width: 100%;
 }
}

♥ 1

いいねをした人:

キタジマ様
設定追加ありがとうございます。次回アップデート後、試してみます！
今後ともよろしくお願いいたします。

JKDECOR様
スレッドに質問を重ねて、すみませんでした。
私の方は解決しましたのでクローズしていただいても問題ございません。

♥ 1

いいねをした人:

キタジマ様

早々に機能追加およびご連絡、大変ありがとうございます！！
さっそくSnow Monkey Blocks v18.0.1に更新しましたので、設定していきます。

♥ 1

いいねをした人: