CSS Sorunu (Beyaz Daire)

Selam dostlar, ufak bir sorunum var.

Bootstrap kullanıyorum ve siteye bir adet açılır modal ekledim. (lightbox)

Fakat buton olarak değil resim olarak ekledim resmin üzerine basınca modal açılıyor buraya kadar hiçbir sorun yok fakat mobil cihazlar'da bu resmin yanında beyaz daire oluşuyor.

Masaüstün'de problem olmuyor sorunsuz açılıyor fakat mobil'de sıkıntı oluyor.

Sorun width ve height değerlerinden kaynaklanıyor mesela her iki değeri'de auto yapınca düzeliyor fakat bu seferde resmin üzerine tıklanmıyor doğal olarakta modal açılmıyor.

min-width ve min-height şeklinde yaptım auto ile aynı sonuç.

Css kodunu ve oluşan beyaz daireyi aşağıya bırakıyorum, yardımcı olabilirseniz çok sevinirim.

Proje local'de bu arada ondan dolayı link bırakamıyorum maalesef.

.kod{width:150px;height:150px;position:fixed;z-index:123123;right:3px;bottom:0;}

Mobil cihazlar için şu kodu kullanarak top değerini yükseltip sorunu çözebilirsin.

@media screen and (max-device-width: 480px) {
.kod{
top : 20px;
}
}

@media screen and (max-device-width: 480px) {
.kod {
position:fixed;z-index:123123;right:3px;bottom:0;}

Bu şekilde ekledim fakat yine aynı maalesef. Oluşan beyaz daire aslında tıklanılabilir alanı gösteriyor masüstünde gözükmüyor.

Kaynak kodu kısmından responsive şekilde bakınca gözükmüyor fakat sunucuya yükleyip gerçek mobil cihazdan bakınca teklif al butonunun orda resimdeki gibi beyaz daire oluşuyor.

Html kısmını'da aşağıya bırakıyorum fakat bu kısımlarda bir problem olduğunu sanmıyorum çünkü yükseklik ve genişlik ile oynama yapınca düzelme oluyor.

<div class="kod">
    <span><img width="150px" alt="teklif alın"  src="/assets/images/teklif-al.png" /> </span>
    </div>
  
   <div type="button" class="kod" data-toggle="modal" data-target="#exampleModalCenter">
   </div>

        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header">
            <h3 class="title theme-gradient"><img src="/assets/images/teklif.png"/> Hızlı Teklif</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>


           <div class="modal-body">
            <div class="kod">
                <p>Detaylar önemli! Ne kadar detaylı anlatabilirseniz projenizin teslim tarihini ve fiyat teklifini sunabiliriz. </p>
                            <form action="" method="post">
                            </div>
                            <div class="card-body p-3">

                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fas fa-user text-info"></i></div>
                                        </div>
                                        <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ad soyad veya Firma Adı" maxlength="75" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-envelope text-info"></i></div>
                                        </div>
                                        <input type="email" class="form-control" id="nombre" name="email" placeholder="E-Posta Adresi" maxlength="50" required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-phone text-info"></i></div>
                                        </div>
                                        <input type="phone" class="form-control" id="nombre" name="phone" placeholder="Telefon" maxlength="20" required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fas fa-mouse-pointer text-info"></i></div>
                                        </div>
                                        <select class="form-control" required="required">
                                        <option value="empty" disabled selected>Hizmet Türü Seçiniz</option>
                                        <option value="Hazır Web Sitesi">Hazır Web Sitesi</option>
                                        <option value="Özel Web Sitesi">Özel Web Sitesi</option>
                                        <option value="e-Ticaret Sitesi">e-Ticaret Sitesi</option>
                                        <option value="Sosyal Medya Yönetimi">Sosyal Medya Yönetimi</option>
                                        </select>                                
                                        </div>
                                        </div>

                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-comment text-info"></i></div>
                                        </div>
                                        <textarea class="form-control" placeholder="Mesajınız" required></textarea>
                                    </div>
                                </div>

                                <div class="text-center">
                                <button type="submit" class="btn btn-danger btn-block rounded-0 py-2">Gönder <i class="fas fa-paper-plane"></i></button>
                                </div>
                            </div>

                        </div>
                    </form>

            </div>
            </div>
            </div>
        </div>
        </div>

Sorunu hala çözebilmiş değilim.