CSS @Media kullanımı yardım

merhabalar, sitemde mobil bölümünde bir alan çok kötü durumda @media ile o alanı düzenleme çalışıyorum fakat ne yaptıysam kabul olmuyor

Mobilin bozuk görüntüsü:
https://prnt.sc/uka6im

yazdığım CSS;

@media (max-width: 1024px)
.elementor-2731 .elementor-element.elementor-element-5c9088f {
     margin-right: 10px;
min-height: 1px;
float: left;
width: 767px;
}

bunu nasıl düzenleyebilirim sitem:

www.sostabilgisayar.com/v2

İSTEDİĞİM GÖRÜNÜM

https://prnt.sc/uka72a başka siteden alıntıdır

kodu yanlıs giriyorsun hocam aşağıdaki gibi olması gerekiyor


@media (max-width: 1024px) {
.elementor-2731 .elementor-element.elementor-element-5c9088f {
margin-right: 10px;
min-height: 1px;
float: left;
width: 767px;
}
}

evet doğru dediğinizi yaptım oldu fakat site çortladı bir düzene oturtamadım

Bootstrap kullansanız daha iyi olur aslında, yukarıdaki hocam cevabı yazmış... 🙂

bootstraplık bi durum yok ki hocam wordpress üzerinde çalışıyorum webde güzel mobilde sıcıyor alan

sabit width vermemeniz lazım objelere width: 48% verip margin: 4% verirseniz oturacaktır sanırım.

sıkıntı şurada o tek bi blokta slider şeklinde geçiyor her birini ayrı ayrı ayarlayamadım

slick slider o hocam css ile olmaz jquery üzerinden düzeltmen lazım html olsa yardım ederdim ama wp'den anlamıyorum, yinede kodunu bırakayım sen bulursun belki nereye yerleştireceğini.
breakpoint dediği yer çözünürlük slidesToShow'da o çözünürlüğe geldiğinde kaç adet ürün gösterilsin.

{
breakpoint: 800,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: true,
infinite: true,

}

valla hocam jsleri yazabileceğim bir yer çıkmıyor ya kafayı yiyebilirim