Responsive'den taşırdım, tutturamadım :)

Merhaba arkadaşlar,

Varolan bir tema üzerinde oynamalar yapıyordum, sıra manşet kısmına gelmişti.

Neyse edebiyata lüzum yok sanırım.

Sorun şu:

http://prntscr.com/8lc2h3

Şöyle bir manşet alanı var, ortadaki kısım ve soldaki kısım eşit boylardaydı en sağdaki kısım daha dardı.

Bende, ortaki kısmı küçültüp margin-left:46px verdim, sağa yanaştırdım.
Soldaki olanı genişlettim, en sağdakileride genişlettim fakat taştı. Sağa doğru taştı yani. Onada padding-left:-48px; verdim masaüstü sürümünde görünümünü sağladım.

PC'de harika görünüyor şu an.

Fakat mobil versiyonu hazırdı bu temanın ve width değerli %100 ve heightleri auto'ydu sanırım onları düzeltsem düzelecek, denemedim fakat öyle olacaktır kesin.

Neyse bu height, width ve padding-margin değerlerimle oynamadan responsive halini düzeltme şansımız var mı?

Responsive görüntüsü:

http://prntscr.com/8lc3f6

Gördüğünüz üzere en üstteki yani m.ü sürüme göre en soldaki sağa taştı. Masaüstü sürümdeki ortada bulunan üstteine göre tam ortalandı sanırım. Mü'de sağdaki ise sol kaçtı görünmüyor bile ucu

Yardımcı olabilecek varsa sevinirim.

Hocam -margin'ler ile yapılacak iş değil bu. Şöyle kısaca anlatayım. CSS'de responsive kısmında o alanlara değer vermeniz gerekiyor. 3 slayt yanyana dizilmiş siz bu 3 slayt için mobilde genişlikleri 100% yapın ve float: none verin. Bu kezde alt alta slayt alanı yapışacak. Bunu da margin-bottom: 10px vererek çözersiniz.

Maalesef yemedi hocam. Eğer müsaitseniz TW ile gelme şansınız da varsa memnun olurum.

@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}

şeklinde kucuk ekrana göre özel olarak class verebilirsin