Responsive ile ilgili css te bir kısımda takıldım

27-06-2015, 00:15:29

Soru 1: Alttaki css kodu ile bu sitedeki 4 lü kutu alanı açılıyor fakat mobil olarak girilmesi için alt alta gelirken kutular arasında boşluk görünmüyor mobil olarak bakınca anlaması kolay.

@media screen and (max-width: 768px) { #content > #box { width:100%; padding:0px; margin:20px auto;} #content > #box > ul { list-style:none; margin:0; padding:20;} #content > #box > ul li { width:100%; background:#07978A; position:relative; height:200px; border-radius:3px; box-shadow:20 3px 5px #eee; padding:60px 0; float:left; margin:0 30px 0 0;} #content > #box > ul li:nth-child(4) { float:right; margin:0;} #content > #box > ul li p, h3 { margin:8px 10px; text-align:center;} #content > #box > ul li a {     display:block; width:120px; height:20px; text-align:center; background:#7d743a; color:#FFFFFF; border-radius:15px; padding:8px; margin:0 auto;      box-shadow: 0 3px 0px #7D743A; position:absolute; bottom:15px; left:30%;} #content > #box > ul li a:hover  { background:#07978A; box-shadow:inset 0 2px 0px #00919E;} #content > #box > ul li .icon { width: 81px; height: 75px; margin:0 auto; position:relative; left:5px;} h3 { font-size:18px; color:#ffffff; text-align:center; } }

Soru 2: edit kendim çözdüm.

27-06-2015, 00:22:40

#2

AlperA.

Ilkinde:

#content > #box > ul li { width:100%; background:#07978A; position:relative; height:200px; border-radius:3px; box-shadow:20 3px 5px #eee; padding:60px 0; float:left; margin:0 30px 0 0;}

kismindaki

margin:0 30px 0 0;

ile

margin:5px 30px 0 0;

degistirince oldu. Yukardan 5px yapinca kutularin arasi acildi, bi bakar misin.

27-06-2015, 00:33:02

#3

barakuda

AlperA. adlı üyeden alıntı: mesajı görüntüle

Ilkinde:

#content > #box > ul li { width:100%; background:#07978A; position:relative; height:200px; border-radius:3px; box-shadow:20 3px 5px #eee; padding:60px 0; float:left; margin:0 30px 0 0;}

kismindaki

margin:0 30px 0 0;

ile

margin:5px 30px 0 0;

degistirince oldu. Yukardan 5px yapinca kutularin arasi acildi, bi bakar misin.

Teşekkür ederim evet o kısım oldu ama 4 kutunun ilk 3 ü arasında boşluk oluşurken 3.4. kutu yine bir durmakta bir bakarmısın tekrar.

27-06-2015, 00:43:10

#4

AlperA.

4. kutu, diger 3u ile ayni <li> tarafindan cagirilmiyor, 4. kutuya etki eden kisim surasi:

#content > #box > ul li:nth-child(4) { float:right; margin:0;}

Ya bunu iptal edip, digerlerini clonelayin, ya da bunun uzerindeki marginde oynama yapin. direk 0'i degistirdiginizde, 4 kutunun tamaminin icinde bulundugu genislik yetmedigi icin, 4. kutu asagiya kayiyor. Yani, box div'ini genisletin (sanirim 990px) ve sonrasinda bu yukardaki margin: 0 degerinde oynama yapin, tabi margin X X X X; sekilde degistirin, zira direk 0 uzerinde oynama yaparsaniz saga sola kayiyor kutu. O yuzden ust, sag ve alt kisimalri da ayarlamaniz gerekiyor.

27-06-2015, 00:51:40

#5

barakuda

2. sorunumu çözdüm konu kapanabılır.

--

AlperA. adlı üyeden alıntı: mesajı görüntüle

4. kutu, diger 3u ile ayni <li> tarafindan cagirilmiyor, 4. kutuya etki eden kisim surasi:

#content > #box > ul li:nth-child(4) { float:right; margin:0;}

Ya bunu iptal edip, digerlerini clonelayin, ya da bunun uzerindeki marginde oynama yapin. direk 0'i degistirdiginizde, 4 kutunun tamaminin icinde bulundugu genislik yetmedigi icin, 4. kutu asagiya kayiyor. Yani, box div'ini genisletin (sanirim 990px) ve sonrasinda bu yukardaki margin: 0 degerinde oynama yapin, tabi margin X X X X; sekilde degistirin, zira direk 0 uzerinde oynama yaparsaniz saga sola kayiyor kutu. O yuzden ust, sag ve alt kisimalri da ayarlamaniz gerekiyor.

Teşekkür ederim direk diğerinden copy yaptım oldu. İlkini sayende çözdük eyvallah hocam.