CSSを使用して画像に整列する

Question

私はデザインを担当しています。デザインはリンクにあります

http://jodbaki.com/apply-nowです。

デスクトップ版は正常に動作していますが、私はモバイルでそれを見ると、フォームは右側から画像から出ています。どうすれば調整できますか？

Answer 1

あなた

<tbody style="float:right; background:white; margin:12px; width:285px;"> 

ではなく、クラスでなければなりません。モバイルに表示されている場合、要素はまったく変更されません。クラス（任意の名前、おそらく.applyform）を持っている場合は、デスクトップバージョンとモバイルバージョンの両方のCSSを変更できます。

デスクトップ版では、上記のtbodyスタイルをコピーしてクラスにすることができます。

.applyform { float:none; margin:0; } 

フロートがなければ、フォームは100％の幅になります。モバイル版のために、私はちょうどフロートを変更することをお勧めします。

Answer 2

input、textarea、selectが原因です。幅が400ピクセル未満になったらCSSメディアクエリを追加して、すべてのフィールドを150ピクセルから100ピクセルに縮小してください。

@media screen and (max-width: 400px) {  
    input,textarea,select { 
     width: 100px !important; 
    }  
}