メディアクリエで改行されないようにしたい

Question

実現したいこと

ブラウザでは画像の左にテキスト、メディアクリエでは画像の下にテキストを入れたいです。

前提

画像の下に入れることはできたのですが、テキストが途中で改行されてしまいます。

  <div id="genninn" class="container">
    <div class="genninn-title">タイトル</div>
    
      <div class="gnn-imtx" >
        <div class="genninn-img"><img src="img/sample1.jpg" alt""></div>
        <p class="genninn-text tx1">テキストテキストテキストテキスト<p>
        <p class="genninn-text tx2">テキストテキストテキストテキスト</p>
        <p class="genninn-text tx3">テキストテキストテキストテキスト</p>
      </div>
  </div>  

.gnn-imtx {
  display: flex;
}

.genninn-img {
  position: absolute;
  width: 30vw;
  height: 20vw;
  top: 11vw;
  left: 60.vw;
}

.genninn-text {
  width: 44%;
  position: absolute;
  top: 11vw;
  left: 10vw;
  font-size: 2vw;
}

@media (max-width: 1024px) {
.genninn-img {
  width: 76.8vw;
  height: 51.2vw;
  top: 15.52vw;
  left: 11vw;
}

.genninn-text {
  font-size: 3.36vw;
  left: 13vw;
}

.tx1 {
  top: 69vw
}

.tx2 {
  top: 80vw
}

.tx3 {
  top: 95vw
}

.gnn-imtx {
  display: block;
}

}

試したこと

display: block;を入れてみましたが変化はなかったです。
初心者で検索しながら使えそうなコードを見て書いているため、ごちゃごちゃしています。

質問見ていただきありがとうございます。
現物ではないですが、こんな感じで画像の途中で改行されます。画像の幅いっぱいで改行されるようにしたいです。

Comments

[CHERRY]

画面を見てない人は、どのような感じなのか分かりにくいので、表示されている画面をキャプチャー画像を添付していただくことは可能でしょうか。

Answer 1

.genninn-text に width: 44%; と設定しているのが原因です。
メディアクエリ内で上記の設定を折り折り返されない幅に上書きすればいいでしょう。

@media (max-width: 1024px) {

/* 略 */

.genninn-text {
  font-size: 3.36vw;
  left: 13vw;
  width: 90%;
}

/* 略 */

質問の趣旨とは外れますが、
各要素を position: absolute; で絶対配置してますが、いろいろ設定が面倒ですし、テキスト量が変化したら設定も調整する必要がでたりします。
また、親要素にdisplay: flex;を設定してますが、まったく意味をなしてません。display: flex;を活かすようなFlexboxレイアウトに変更することをお勧めします。

Comments

[sanoz]

ありがとうございます。解決できました。

まだコーディングのことがよく理解できておらず、なんでもposition: absolute;で配置し調整していました。順番に勉強し直したいと思います。アドバイスも頂きありがとうございました。