HTMLモジュールをレスポンシブ対応したい

WordpressでHTMLモジュールを用いることによって、会話形式を実装しました。
(参考文献: https://saruwakakun.com/html-css/reference/speech-bubble)

しかし、wordpressのresponsive editingがHTMLモジュールに対応していないのかわかりませんが、PC版では綺麗にできていません。スマホ版を基準にして作成しました。pC版の方を１枚目の画像の点線のようにもう少し大きくしたいです。

具体的には、スマホ版の見た目はなるべく変えずに、１枚目の画像のようにPC版の吹き出しを大きくし、それに合わせて文字の大きさも大きくしたいです。

どうぞよろしくお願いいたします。


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<style>

.balloon {
  min-width: 80%;
  width: 100%;
  /*height: 500px;*//*.baloonのheightが指定されていないと、.chattingのheightは指定できない*/
  /*margin-left: 100px;PC版では中心よせしたいが、スマホ版ではこのままでいい。どうする？*/
  margin: 1.5em auto;
  overflow: hidden;
  display: flex;
}
.balloon.right {
  flex-direction: row-reverse;
}


.balloon .faceicon {
  margin: 0 10px 0 10px;
  /*以下２つでFaceiconの大きさをResponsive editingする*/
  width: 25%;
  max-width: 150px;
  flex-shrink: 0;
}

.balloon .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #F0F0F0;
  border-radius: 50%;
}

.balloon .chatting {
  display: inline-block;
  max-width: 400px;
  width: 72%;
  /*height: 100%;*/
}

.says {
  position: relative; 
  margin: 5px 20px 0 20px;
  /*margin: 3em auto;*/
  padding: 1em 13px;/*縦方向のpaddingを、文字の大きさ依存にしてみた*/
  border-radius: 12px;
  background: #d7ebfe;
  /*height: 135px;*//*paddingをデバイスによって変更したいのか？・*/
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  border: 12px solid transparent;
}

.left .says:after {
  left: -24px;
  border-right: 12px solid #F0F0F0;
}
.right .says:after {
  right: -24px;
  border-left: 12px solid #F0F0F0; 
}
.says p {
  margin: 0;
  padding: 0;
  font-size: 1vw;/*vwを用いれば、デバイスごとの大きさに変わるらしい*/
}

.says span {
  color:#73683b;
  font-size: 10px;/*ここもvwで指定？*/
}
</style>
</head>

<body>
 
<!--吹き出しはじまり-->
<div class="balloon left">
  <div class="faceicon">
     <img src="ここは写真のURL">
  </div>
  <div class="chatting">
    <div class="says">
      <p><span>ああああああああああああああああ</span></p>
      <p>あああああああああああああああ</p>
      <p>あああああああああああ</p>
       <p>あああああああああああああああ</p>
       <p>ああああああああああ</p>
    </div>
  </div>
</div>
<div class="balloon right">
  <div class="faceicon">
     <img src="ここは写真のURL">
  </div>
  <div class="chatting">
    <div class="says">
        <p><span>ああああああああ</span></p>
      <p>ああああああああああああああああああああ</p>
    </div>
  </div>
</div>
<div class="balloon left">
  <div class="faceicon">
     <img src="ここは写真のURL">
  </div>
  <div class="chatting">
    <div class="says">
     <p>ああああああああああああああ</p>
     <p>あああああああああああああああああああああああああ</p>
    <p>ああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
</div>
<div class="balloon right">
  <div class="faceicon">
     <img src="ここは写真のURL">
  </div>
  <div class="chatting">
    <div class="says">
      <p>あああああああああああああああああああああああああああああああああああああああああああああああ</p>
      <p>ああああああああああああああああああああああああ</p>
    </div>
  </div>
</div>


</body>

hatena19

2021/12/12 17:06

> 現在のコードでは、吹き出しの高さをpxで指定しているので、提示のコードではどこにも高さを指定している部分はないですが。そもそも、中に入るテキストの長さが異なるので、高さは指定するべきではないのでは。高さを指定すると、テキストが多いとはみ出てしまいます。それとも、はみ出た部分はスクロールするようにしたいということですか。

nitori-kun

2021/12/12 23:27

コメントありがとうございます！諸事情により実際のコードの文言・写真をterateil上にあげれらないため、イメージを記載しました（わかりにくくて申し訳ありません。）実際のコードには、.baloon内にheight: 500px;、.baloon chatting内にheight: 100%;を記述しています。中に記述するテキストはすでに確定しており、そのテキストの大きさに関係なく吹き出しの高さだけ変更したいと思いました。よろしくお願いいたします。

hatena19

2021/12/12 23:45 編集

テキストの長さが固定だとしても、ブラウザの幅を変更すれば、吹き出しの幅も変わり折り返しでテキストの高さは変わりますよね。それにはどのように対処するつもりですか。実際のコードそのままを上げられなくても、テキスト部分はダミーにする、クラス名等は変更するなどして、現状の状態を再現できるものを提示して、それを元にどこをどのようにしたいのか、というように質問してくれないと、回答は難しいと思いますよ。

nitori-kun

2021/12/14 10:15

おっしゃる通りですね、、、編集しました

行動規範の内容に同意します

回答1件

吹き出しの高さをもう少し長くしたいです。

.balloon .chattingのCSS内でheightを％で指定し、その親要素の高さを指定するために.baloon内にheightを指定しました。しかし、何も変わりませんでした。

実際のコードには、.baloon内にheight: 500px;、.baloon chatting内にheight: 100%;を記述しています。

.says にも高さを入れないと吹き出しは広がらないのでは？

現在のコードでは、吹き出しの高さをpxで指定しているので、これを％で指定

パーセンテージ指定は親要素の高さが基準になりますので、それでレスポンシブ対応をするためには、親要素の高さがレスポンシブ対応できていることが前提になります。
具体的なゴールをご提示いただいていないので一般論的な答えになりますが、テキストの長さが固定とのことですから、emでサイズ指定すればいいのではないでしょうか。

投稿2021/12/13 02:09