吹き出しについて、スマホサイズでもアイコンとテキストを横並びにしたい。

♥ 0

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

このトピックには2件の返信、2人の参加者があり、最後にまっちーにより3年、 10ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2021年1月20日 3:19 AM #65830
まっちー
閲覧者

♥ 2
【お使いの Snow Monkey のバージョン】WordPress 5.6
【お使いの Snow Monkey Blocks のバージョン】バージョン 10.2.1
【お使いの Snow Monkey Editor のバージョン】バージョン 4.0.0
【お使いのブラウザ】Google Chrom

【当該サイトのURL】https://www.itmy538.com　ID【wood】パス【５３８】

### 実現したいこと

吹き出しについて、スマホサイズでもアイコンとテキストを横並びにしたいです。

### 発生している問題

スマホサイズでアイコンとテキストが縦並びになる

### 試したこと
```
.smb-balloon{
  flex-direction:row
}
```
よく分からないなりに上記のCSSを追加し、横並びにはなったのですが、吹き出しの▲の位置が上側に来てしまいます。

大変恐縮ですが、どなたかご教授いただけると嬉しいです。

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

♥ 1

いいねをした人: 居ません
2021年1月20日 10:59 AM #65860
キタジマタカシ
参加者

♥ 2421
こんな感じでどうでしょうか？
```
@media (max-width: 639px) {
  .smb-balloon {
    flex-direction:row
  }

  .smb-balloon__person {
      margin: 0 20px 0 0;
  }

  .smb-balloon__body::after {
    top: 50%;
    left: -10px;
    margin-top: -5px;
    border-color: transparent;
    border-right-color: inherit;
    border-width: 5px 10px 5px 0;
  }
}
```
♥ 0

いいねをした人: 居ません
2021年1月20日 11:04 AM #65863

まっちー
閲覧者

♥ 2

教えていただいたCSSで思い通りの表示となりました！ありがとうございます。

もっと勉強します。トピック閉じさせていただきます。

♥ 1

いいねをした人: 居ません
投稿者

投稿