画像中央左寄せにテキストをレスポンシブで表示させたい

Question

前提・実現したいこと

HTML/CSSで
メイン画像の上下中央、左右左よりにテキストを表示させたいです。
PC表示としてはそれっぽく見えるのですがレスポンシブになっておらず、
画面幅が小さくなると文字が見きれてしまいます。

発生している問題・エラーメッセージ

テキストが見きれないようにしたい（レスポンシブにしたい）

該当のソースコード

<div class="mainimg">
	<img src="images/mainimg.jpg" class="img-fluid">
<p class="maintext"><span class="mainbold">SAMPLE NAME.......</span><br>
<span class="mainsmall">Company Slogan.........</span></p>
</div>

p.maintext {
  position: absolute;
  top: 50%;
  left: 25%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
 text-align:left;
}

試したこと

メディアクエリを指定すればいいのかな、と思ったのですが、
@media screen and (max-width: 600px) {
p.maintext{
font-size: 15px;
}
}
とCSSに書き足しても変わりませんでした。

補足情報（FW/ツールのバージョンなど）

レスポンシブにする方法をご教示お願いいたします。

Comments

[hatena19]

レスポンシブといってもメイン画像のサイズはどうするのですか。
サイズ固定ですか。それとも画面一杯に広げるのですか。
その部分のCSS設定も提示してもらえますか。.mainimg に対する設定とか。
背景画像なら、CSSの background-image に設定したほうがレスポンシブ対応にしやすいように思います。

[NAKAZAKI]

KimTomさんが回答してくださった方法で解決いたしました。

なお、画像のサイズは960*400で、背景画像ではありませんでした。
不十分な情報ですみませんでした。

質問いただき、ありがとうございました！

Answer 1

コード拝見しました。
現状は「.mainimgの左半分の中心に.maintextを配置する」というスタイルですね。
まずはmax-width: 50%;を追加してください。
これで狭い画面でも画面外にはみ出ることなくスタイルを維持できます。

p.maintext {
  position: absolute;
  top: 50%;
  left: 25%;
  -ms-transform: translate(-50%,-50%); /* この行は無くても大丈夫です */
  -webkit-transform: translate(-50%,-50%); /* この行は無くても大丈夫です */
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  text-align:left;

  max-width: 50%; /* これを追加 */
}

幅が狭いときはテキスト表示領域を広げたい場合は以下のようなコードを追加してみてください。
通常の左寄せテキストになります。

@media screen and (max-width: 600px) {
  p.maintext{
    left: 0;
    transform: translateY(-50%);
    max-width: 100%;
  }
}

Comments

[NAKAZAKI]

ありがとうございます！

意図したことができました。感謝感謝です！