WooCommerce Sepete Ekle ve Satın Al Butonlarını Hizalama

/* Flex konteynerini ayarla */
form.cart {
    display: flex; /* Flexbox kullan */
    align-items: center; /* İçerikleri dikey olarak ortala */
    justify-content: flex-start; /* İçerikleri başlangıç noktasına yasla */
}

/* Ortak stiller */
.woocommerce .single_add_to_cart_button,
form.cart .wd-buy-now-btn {
    flex: 1; /* Butonlara eşit genişlik ver */
    height: 50px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center center;
    margin-right: -150px; /* Butonlar arasındaki boşluğu azalt */
}

/* Son butona sağdaki boşluğu kaldır */
form.cart .wd-buy-now-btn {
    margin-right: 0;
}

/* Arka plan resimlerini belirle */
.woocommerce .single_add_to_cart_button {
    background: url('https://i.hizliresim.com/p5vqcr9.png') no-repeat;
}

form.cart .wd-buy-now-btn {
    background: url('https://i.hizliresim.com/2d9xecm.jpeg') no-repeat;
}

/* Küçük ekranlar için medya sorgusu */
@media only screen and (max-width: 767px) {
    form.cart {
        flex-direction: column; /* Sütun düzenine geç */
    }

    .woocommerce .single_add_to_cart_button,
    form.cart .wd-buy-now-btn {
        width: 100%;
        box-sizing: border-box;
        margin-right: 0; /* Mobilde sağdaki boşluğu kaldır */
    }
}

Woocommerce sepete ekle ve satın al butonlarını değiştirmek istiyorum. Yukarıda ki kodu yazınca masaüstünde böyle gözüküyor. Butonlar arasında ki boşluğu margin-right: -150px; ile azaltmaya çalıştım. Özelleştir den bakınca arada ki boşluk gidiyor ama sitede yine çıkıyor.

Mobilde de aşağıdaki gibi gözüküyor. Üstte ki resim sağ taraftan kırpılıyor ve altta ki de sola kayıyor.


Üstte ki butonun kırpılmasını önlemek ve alttakinin de ortalanmasını istiyorum. Ücretli ücretsiz yardımcı olabilen var mı?

Site adresinizi alabilir miyim butonların bulunduğu

Woodmart teması galiba bu şekilde görmeden yapmak zor ama şunu bir dener misin

form.cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.woocommerce .single_add_to_cart_button,
form.cart .wd-buy-now-btn {
    flex-basis: calc(50% - 10px);
    max-width: calc(50% - 10px);
    height: 50px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center center;
}

.woocommerce .single_add_to_cart_button {
    background: url('https://i.hizliresim.com/p5vqcr9.png') no-repeat;
}

form.cart .wd-buy-now-btn {
    background: url('https://i.hizliresim.com/2d9xecm.jpeg') no-repeat;
}

/* Küçük ekranlar için medya sorgusu */
@media only screen and (max-width: 767px) {
    form.cart {
        flex-direction: column;
    }

    .woocommerce .single_add_to_cart_button,
    form.cart .wd-buy-now-btn {
        width: 100%;
        box-sizing: border-box;
        margin-right: 0;
    }
}

.woocommerce .single_add_to_cart_button {    background: url('https://i.hizliresim.com/p5vqcr9.png') no-repeat;    background-size: cover;  }

form.cart .wd-buy-now-btn {    background: url('https://i.hizliresim.com/2d9xecm.jpeg') no-repeat;    background-size: cover; }

Önceki verdiğiniz kod da masaüstü iyiydi hocam. İkisi de bozuldu şimdi.

@media(max-width: 467px){
.woocommerce .single_add_to_cart_button {    background: url('https://i.hizliresim.com/p5vqcr9.png') no-repeat;    background-size: cover;  }

form.cart .wd-buy-now-btn {    background: url('https://i.hizliresim.com/2d9xecm.jpeg') no-repeat;    background-size: cover; }
}

diğer kodu kaldırın tabi sadece mobilde geçerli olsun