スマホで見たときに左右の余白をもう少し広くしたい。

この左右の余白、実は Snow Monkey の中でもカスタマイズが難しい部分なのです…。カスタマイザーで設定できるようにしたいなと思ってはいるのですが、良い方法が浮かばずで手つかずになっています。

一応、下記の CSS を追加することでそれなりにはうまく動いてくれるかな？と思いますが、設定やコンテンツによっては正しく余白が確保されなかったりする部分がでてしまうかもしれません。ひとまず追加して、確認してみていただければと思います。

.c-container, .c-fluid-container {
  padding-right: 1.76923rem;
  padding-left: 1.76923rem;
}

.smb-section>.c-container, .smb-section__inner>.c-container {
  padding-right: 1.76923rem;
  padding-left: 1.76923rem;
}

@supports (padding-left:env(safe-area-inset-left)){
  .smb-section>.c-container, .smb-section__inner>.c-container {
    padding-right: calc(1.76923rem + env(safe-area-inset-right));
    padding-left: calc(1.76923rem + env(safe-area-inset-left));
  }

  .c-container, .c-fluid-container {
    padding-right: calc(1.76923rem + env(safe-area-inset-right));
    padding-left: calc(1.76923rem + env(safe-area-inset-left));
  }
}

今後のアップデートで、カスタマイザーから「ノーマル」or「広め」で選べるようにできたら良いなと考えています。やるとなるとIE11 が超絶ネックなので、IE11 には反映できないにしても、他のブラウザではちゃんと動作できるか検証してみたいと思います。

トピック閉じますね。