• 27-06-2015, 00:15:29
    #1
    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
    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
    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
    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
    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.