Merhabalar galeri bölümü oluşturdum responsive olması için @media etiketi ile çalışıyorum ancak mobil kodları ile masaüstü css kodları aynı anda o divi etkiliyor saçma bir görüntü ortaya çıkıyor
HTML KODUM
<div class="book-table-area pt--100 pt_md--80 pt_sm--60">
<div class="container">
<div class="row">
<div class="col-12">
<div class="brook-section-title-restaurant text-center mb--50">
<div id="iletisim" class="bkseparator--10"></div>
<h3 class="color-white"><font color="#BC9464">İletişim Bilgilerimiz</font> </h3>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="book-table-form">
<div class="iletisim-bilgileri" >
<div class="iletisim-satir">
<div class="icon">
<i class="fas fa-user"></i>
</div>
<div class="bilgi">
<h5>Genel koordinatör</h5>
<p>Alptekin Karaman</p>
</div>
</div>
<div class="iletisim-satir">
<div class="icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="bilgi">
<h5>İletişim</h5>
<p>0541 852 52 19</p>
</div>
</div>
<div class="iletisim-satir">
<div class="icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="bilgi">
<h5>Adres</h5>
<p>Küçükçekmece/ İSTANBUL</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS KODUM
.iletisim-bilgileri {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.iletisim-satir {
display: flex;
align-items: center;
}
.icon {
background-color: #BC9464;
color: #fff;
font-size: 28px; /* İkon boyutu büyütüldü */
width: 60px; /* Daire boyutu büyütüldü */
height: 60px; /* Daire boyutu büyütüldü */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.icon i {
margin-left: -1px;
}
.bilgi {
text-align: left;
}
.bilgi h3 {
color: black;
font-weight: bold;
letter-spacing: 0.5px;
}
.bilgi p {
font-weight: normal;
font-size: 22px; /* İçerik yazılarını 18px olarak ayarladım */
letter-spacing: 1px;
}
@media (max-width: 768px) {
.col-lg-4 {
flex: 0 0 100%;
max-width: 100%;
}
.footer-widget {
text-align: center;
}
.footer-address {
margin-top: 20px;
}
.social-share {
display: flex;
justify-content: center;
}
.social-share a {
margin: 5px;
}
.footer-address p {
margin: 5px 0;
}
.footer-widget {
text-align: left;
}
.footer-address {
margin-top: 0;
}
.footer-address p {
margin: 0;
}
}