[yuu]

【お使いの Snow Monkey のバージョン】15.18.0
【お使いの Snow Monkey Blocks のバージョン】 13.7.3
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】Chrome
【当該サイトのURL】https://nearmain-site.com/my-service/request-test/

### 実現したいこと

いつもお世話になっております。

タブを使い、その中にセクション（サイド見出し）を入れているのですが、

①テキストがはみ出したときに自動で改行したい。

携帯で見たときのように自動でテキストを改行するにはどうしたらいいでしょうか？

完成イメージ⬇

 

②ブレークポイント768pxでレイアウトを縦にしたい。

ブレークポイント639pxで行われるCSSと同じようにしたいです。

イメージ⬇

 

以上、この2つを実現したいのですが、知恵をいただけますでしょうか。

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

 

### 発生している問題

①セクション（サイド見出し）の右ブロックに価格メニューを入れているのですが、メニュー名が長いときにはみ出してしまいます。

overflow: auto;　などを当ててみましたが、横にスクロールしてしまうだけで、改行にはなりませんでした。

②縦のレイアウトにするために　display:flex;   flex-direction: column; をあてましたが、右側に余白ができてしまいます。

### 試したこと

♥ 0

いいねをした人: 居ません

[まーちゅう]

①セクション（サイド見出し）の右ブロックに価格メニューを入れているのですが、メニュー名が長いときにはみ出してしまいます。

メニュー名が長いときということは、Flexboxの子要素の中身の折り返しなので、親要素に overflow: auto; をあててもダメです。
.smb-price-menu__item__title に max-width を指定してやれば折り返しできますので、試してみてください。

♥ 1

いいねをした人:

[まーちゅう]

②縦のレイアウトにするために　display:flex; flex-direction: column; をあてましたが、右側に余白ができてしまいます。

こちらのフォーラムでは、1トピック1課題になっていますので、上記は別トピックでお願いします。

♥ 2

いいねをした人:

[まーちゅう]

.smb-price-menu__item__title に max-width を指定してやれば折り返しできますので、試してみてください。

flex-basis 使った方がスマートでしたね。

@media (min-width: 40em) {
  .smb-price-menu__item>* {
    flex: 0 0 auto;
  }
}

ここで、flex-basis が auto になっているのが、折り返されない原因です。
パーセンテージやピクセル値で指定できます。calc() も使えたはず。

♥ 1

いいねをした人:

[yuu]

まーちゅう様

ありがとうございます。

 

こちらのフォーラムでは、1トピック1課題になっていますので、上記は別トピックでお願いします。

 

大変失礼いたしました。

別トピックを立てたいと思います。

♥ 0

いいねをした人: 居ません

[yuu]

flex-basis 使った方がスマートでしたね。

@media (min-width: 40em) {
.smb-price-menu__item>* {
flex: 0 0 auto;
}
}

ここで、flex-basis が auto になっているのが、折り返されない原因です。
パーセンテージやピクセル値で指定できます。calc() も使えたはず。

 

こちらをパーセンテージ（ flex: 0 0 70%; ）で試したところ、価格のところのwidthまでが広がってしまい文字が左寄せになってしまいました。

 

 

文字を右寄せにするとタブからはみ出ててしまうため、flex-basisを使い、

 

.smb-price-menu__item__title {
flex-basis: 70%;
}
.smb-price-menu__item__price {
flex-basis: 25%;
text-align: right
}

 

としたところ、良さそうな気がするのですが、こちらのコードで問題はありそうでしょうか？

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

としたところ、良さそうな気がするのですが、こちらのコードで問題はありそうでしょうか？

各デバイスサイズで確認してみて意図しない崩れがないのであれば大丈夫ではないですかね？ただし、CSS でカスタマイズする場合は Snow Monkey / Snow Monkey Blocks 等のアップデート時に影響がでる可能性があるので、その際は再チェックが必要かと思います。

♥ 2

いいねをした人:

[yuu]

キタジマさん

ありがとうございます。

 

では、今のところ理想の形になっているので大丈夫そうです。

 

まーちゅうさん、ありがとうございました。

トピック閉じます！

♥ 1

いいねをした人:

[投稿者]

投稿