こちらのフォームをレスポンシブにしたい

Question

失礼いたします。
こちらのフォームをレスポンシブにしたいのですが、どうしたらよいでしょうか。
ＷＰにメルマガ用の入力フォームを入れてカスタマイズしていたのですが、メディアクエリの入れ方がよく分かりません。
先方の希望でinputボタンは画像になっております。
.form_input_input と.submitの部分をブレイクポイント736pxで切り替わる様にしたいのですが...
よろしくお願い致します。

<style> <!-- .form_input_input { width: 470px !important; display: inline-block !important; text-indent: 1em; color: black; } .form_input_vertical { display: block !important; } .form_input_horizontal { display: inline-block !important; } div.right_block { width: 60%; word-break: break-all; display: inline-block; } #content_form { padding-left : 50px; background-color : #fff !important; padding:0px !important; } .submit{ border: 0px; width:470px; height:70px; background: url(http://tamurakatsuo.com/wp-content/uploads/2017/07/05337f7a62bcc72f351588587267efaf.png) left top no-repeat; } div.submit:hover { position: relative; bottom: -2px; }--> </style>

<div id="content_form">
<form id="UserItemForm" style="width: 60%; margin-right: auto; margin-left: auto;" accept-charset="utf-8" action="https://mailmagazine.tamurakatsuo.com/p/r/JhBj577l" enctype="multipart/form-data" method="post">

<p><input name="_method" type="hidden" value="POST"></p>

<div class="input text required">

<input id="Username1" class="form_input_input" placeholder="お名前（苗字だけでもOK）" name="data[User][name1]" type="text" value=""></div>
<p><be></be></p>

<div class="input text required">
<input id="Usermail" class="form_input_input" placeholder="メールアドレス" name="data[User][mail]" type="text" value=""></div>
<p><be></be></p>

<div class="submit"><input type="submit" value="" class="submit"></div>
<p><input id="server_url" type="hidden" value="https://mailmagazine.tamurakatsuo.com"><!-- ▼リファラ --><input id="UserRefererFormUrl" name="data[User][referer_form_url]" type="hidden" value=""><input id="UserRefererUrl" name="data[User][referer_url]" type="hidden" value="">

<script type="text/javascript"><!--if (document.referrer.length !=0 ){ if(document.getElementById("UserRefererUrl")) { document.getElementById("UserRefererUrl").value=document.referrer; }}if (document.getElementById("UserRefererFormUrl")){ document.getElementById("UserRefererFormUrl").value=location.href;}//--></script><!-- ▲リファラ --></p> </form> </div>

Comments

[退会済みユーザー]

メディアクエリの入れ方がよくわからないということですが、「メディアクエリ」というキーワードで検索はされましたか。その上でさっぱりわからなくて、一文字も書けないという状況でしょうか。

[o-ban]

<style></style>で囲まれたケースは初めてなので。各クラスの上に書けばいいのでしょうか？それとも最初の方(または最後の方)にまとめて書けばいいのでしょうか

[退会済みユーザー]

お手数ですが、質問事項は質問文へ書いていただけますか。

[m.ts10806]

<style>～</style>もそこに同じ内容がXXX.cssに書かれていて<link rel="stylesheet" type="text/css" href="XXX.css"/>と置かれているのと同じなのですが。。

[o-ban]

すみません。書けました。お騒がせしました。

Answer 1

普通にスタイルタグの中に書いたら解決しました。
お騒がせしました。