• 03-08-2023, 11:49:18
    #1
    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;
      }
    }
  • 22-08-2023, 10:42:37
    #2
    .iletisim-bilgileri {
    1. display: flex;
    2. flex-direction: row;
    3. justify-content: space-between;
    4. align-items: center;
    5. flex-wrap: wrap;
    }
  • 22-08-2023, 10:56:30
    #3
    sawacrow adlı üyeden alıntı: mesajı görüntüle
    .iletisim-bilgileri {
    1. display: flex;
    2. flex-direction: row;
    3. justify-content: space-between;
    4. align-items: center;
    5. flex-wrap: wrap;
    }
    Halettim hocam konuyu açtığım gün yinede saolun