スマホで見た時、placeholderが切れる。

Question

Chromeのパソコン、スマートフォンモードではplaceholderはしっかり表示されているのに、
サイトを公開し、自身のスマートフォンで見た時のみ、下記の画像のようにplaceholderが切れてしまいます。

この解決方法が分からず困っています。どなたかのお力をお借りしたいです！お願いします！

この部分のコードは下記のようになっています

.contact input[type="text"],
.contact textarea {
border: 1px solid;
padding: 0.4em 0.6em;
height: 40px;
width: 100%;
}

__

Answer 1

[1]
line-height: 1;、line-height: 1.5;、line-height: 2;など、
line-heightに1以上の数字を指定してみるといかがでしょうか?

[2]
heightを削除するか、min-heightに置き換えてみる、などいかがでしょうか?

Comments

[teruya_inomata]

ご回答ありがとうございます。上記２点試してみましたが、うまく行きませんでした。paddingの調整なども現在試してみています。

[teruya_inomata]

すみません直っていました！
サファリのキャッシュクリアの問題でした！！
ありがとうございました！

[new1ro]

無事解決したようで、よかったです！