Form'a tıklayınca mobilde klavye sebebi ile üste çıkması
<div class="search">
<form method="get" action="arama.php">
<input type="text" name="q" autocomplete="on">
<button class="sil-butonu" aria-label="Search" type="button" tabindex="3" onclick="clearText();">
<i class="demo-icon"></i>
</button>
<button class="arama-butonu" aria-label="Search" tabindex="1" type="submit">
<i class="demo-icon-arama"></i>
</button>
</form>
Merhabalar,
örnek olsun diye yukarıya kodu paylaştım.
Mobilde form'a tıklandığında form biraz üste çıkıyor nedense. Bu sebeple görüntü bozukluğu oluyor. Yani üstte menülerimiz var. İçine giriyor kısaca.
Css düzenleyin
Yoksa
aşağıdaki mobil ekran için örnek bir css kodu
@media kodu nedir: farklı medya türleri ve cihazlar için stillendirip uygulamak için kullanılır
@media screen and (max-width: 500px) {
.search a, .search input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.search input[type=text] {
border: 1px solid #ccc;
}