ウサヲです。

お問い合わせ先の名前やメールアドレス欄など、 許されるだけの横幅全体にビヨーンと長くしたくない場合には、width と max-width を併用するといい、と聞いたので、メモ。

input欄の幅を変えてみます。

当初、ウサヲブログの「お問い合わせ」ページの見てくれは、コンナでした。

 

お名前やメルアドなど、実に無駄にビヨーンと長い領域が確保されています。レスポンシブにも対応するようにと、９８％の幅で指定してありますが、・・・しかしみっともない。ビョーン。

そしてこのようにしました。

いかがでしょう！夏のシャワー後のようにサッパリしました！

CSS、こうしました。

 input[name="your-name"],
 input[name="your-email"],
 input[name="your-subject"],
 textarea[name="your-message"] {
    max-width: 98%;
}
 input[name="your-name"],
 input[name="your-email"] {
    width: 18em;
}
 input[name="your-subject"] {
    width: 28em;
}

アドバイスくださった神と崇めるウェブの師匠に感謝であります。ウサヲはリフレッシュしました。