CSS ile yapılan kartları ekrana göre boyutlandırmak

Merhaba Arkadaşlar,

CSS ile yapılan kartları ekrana göre boyutlandırmak ve ekran boyutu 500px' in altına düşünce bi satırda iki adet gözüküp kart boyutlarının küçülmesini istiyorum.

Nasıl yapabilirim...


https://yadi.sk/i/jwcpouwamm5Wk

Tek kartın genişliği x 3 = x
x/2 = y

@media (max-width: 500px) {
    .kart {width: y}
}

böyle bir formül uygulayabilirsin hocam, eğer anlamadıysan formulü buradan html ve css kodlarını paylaş, tekrar bakarım ya da diğer üyeler de yardımcı olabilir

Teşekkür ederim. Dediklerinizi denedim fakat beceremedim.

Sorun yaşadığım sayfa bu: http://www.tarotburada.com/tarot-fali

500 px in altındayken sorun olması lazım hocam Chrome da F12 ile iPhone 6 vs dediğim zaman üst üste geliyor

şu kodu css'e eklerseniz üst üste gelmez, tek tek sıralanır

@media (max-width: 500px) {
    .secim-ilk li {
       width: 100%;
    }
}

Teşekkür ederimmm. Peki 500 px den küçük ekranlarda kartların boyutunu düşürmek mümkün mü? Tek satıra iki adet kart sığdırabilmek için ve siz hangi browser dan baktınız hocam yazılar ters duruyor sizde

Yazıların ters durmasının nedeni resmi tarayıcıyla çekmem . Firefox'un responsive modunda çektiğimden öyle oldu.

li'ye verdiğim width: 100%'ü 45 - 40 - 35 olarak genişlik düştükçe değiştirebilirsiniz hocam ancak size önerim bu şekilde kullanmanızdır

her px için özel bir genişlik tanımlamanız mümkün değil. Ha mümkün ama 500'den 320'e ye kadar her px için tasarlamak çok zahmetli olacaktır.