W TRAKCIE 3 miniatury w linii w RWD

Discussion in 'Zmiana wyglądu sklepu i edycja zaawansowana' started by Marcel, Nov 26, 2017.

  1. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    witam fachowców !

    czy ktoś wie jak zrobić aby w RWD na telefonie były 3 miniatury produktu w jednej linii zamiast standardowej 1 ? Najlepiej bez odstępów między miniaturami ....

    pozdrawiam form
    Marcel
     
    Marcel, Nov 26, 2017
    #1
  2. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    dziękuję Ci tajemniczy fachowcu....

    proszę o jeszcze :)

    kod który dostałem mailem zamieniłem z tym co miałem wcześniej (poniżej)
    ____________________________________________________________

    //modyfikacja lista produktow
    @media screen and (max-width: 767px)
    {
    .rwd .main #box_mainproducts .products .product {
    height: auto !important;
    padding: 0;
    margin: 0;
    }

    .rwd .main #box_mainproducts .products.viewphot .product .product-inner-wrap {
    padding: 0em;
    }

    .products.viewphot .product .prodimage .img-wrap img {
    max-height: 500px;
    }
    }


    _________________________________________________

    niestety miniaturki są 3 ale strasznie małe i a wielkimi przerwami.

    Powyższy kod ustawia mi 1 dużą miniaturę w rzędzie.
    Jak zrobić aby były 3 duże (zeskalowane) w rzędzie i bez przerw ?

    z góry dzięki :) !
     
    Marcel, Nov 26, 2017
    #2
  3. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    no niestety nie działa

    mój cały css wygląda tak:

    .your-box-epageo {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    }
    .col-md-5-epageo {
    width: 50%;
    float: left;
    }
    .col-md-5-epageo {
    text-align: center;
    }
    .col-md-5-epageo img {
    text-align: center;
    }

    .zoom-in-small img {
    transition: 360ms;
    }

    .zoom-in-small:hover img {
    transform: scale(1.05);
    }

    .zoom-in img {
    transition: 360ms;
    }

    .zoom-in:hover img {
    transform: scale(1.1);
    }

    .col-md-2 {
    box-sizing:border-box;
    width: 20%;
    float: left;
    padding: 5px;
    }

    .col-md-2 img {
    transition: 360ms;
    }

    .col-md-2:hover img {
    transform: scale(1.1);
    }

    @media (max-width: 576px) {
    .col-md-2 {
    width: 50%;
    }
    .col-md-5-epageo {
    width: 100%;
    }
    }

    /* ---------------- */


    .wrapper-video-epageo {
    Position: relative !important;
    width: 100%;
    max-width: 100%;
    margin: 10px auto;
    height: auto;
    background: #fff;
    }






    /*shopcademy video banner*/
    .top > .container {width:100%;}

    .sc-video-box {
    height: 460px;
    position: relative;
    }
    #video-container {
    position: absolute;
    }
    #video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
    }
    video {
    position:absolute;
    z-index:0;
    }
    video.fillWidth {
    width: 100%;
    height:auto;
    top:-200px;
    }

    #sc_video-bg{display:block;width:100%; height:auto; max-width:100%; background-size:cover!important; height:380px; background: url('../images/user/'); background-position:center center!important;}

    @media only screen and (max-width : 360px) {

    #sc_video-bg{display:block;width:100%; height:auto; max-width:100%; height:260px; background-size:cover!important;}
    }

    .center-hack {display:block; position:absolute;top: 50%!important;
    left: 50%!important; transform: translate(-50%, -50%);}

    .sc_video-btn {text-align:center}
    .sc_video-btn a{text-align:center; color:#000; font-size: 1.1em; cursor:pointer; background:#fff; padding: 0.6em 2.2em; font-weight:bold}

    h2#sc_slider {color:#fff!important; font-size:2em!important; text-align:center;}

    /* rwd */
    @media only screen and (max-width : 456px) {
    video.fillWidth {
    display: none;
    }
    #sc_video-bg{display:block;width:100%; height:auto; max-width:100%; background-size:cover!important; height:260px; background: url('../images/user/');}

    }

    @media only screen and (max-width : 360px) {
    .sc_video-btn a{ padding: 0.6em 1.2em; font-weight:bold}

    }



    @media only screen and (max-width : 967px) {

    #sc_video-bg{display:block;width:100%; height:auto; max-width:100%; background-size:cover!important; height:200px; background: url('../images/user/');}

    video.fillWidth {
    width: 100%;
    height:auto;
    top:0px;
    }

    }






    /*shopcademy video banner end*/








    .banner img{
    height: auto !important;
    }



    /*sc foto*/
    #sc_foto {width:100%; margin: 10px 0; float:left; clear:both;}
    #sc_foto img {width:48%; float:left; margin-left:1%;}
    /*.sc_lista-fot li:first-child {display:none!important;}*/

    @media screen and (max-width: 767px) {
    #sc_foto img {width:100%; margin:5px 0;}
    }

    /*end sc foto*/




    .products.viewphot .product .buttons form {
    display: none !important;
    }
    .products.viewphot .product .buttons .quickview span {
    display: none !important;
    margin-top: 0 !important;
    }
    .products.viewphot .product {
    height: 300px !important;
    }

    .products.viewphot .product .productname {
    display: none !important;
    }
    div.price.f-row {display:none;}




    .menu .innermenu .menu-list li h3 a:hover {
    background-color: #F00A0A;
    }
    #box_menu ul li.current > a {
    background-color: #F00A0A;
    }
    .sort-and-view .sortlinks .products-sort-container .products-sort-options a.active-sort:hover {
    background-color: #F00A0A;
    }
    .sort-and-view .sortlinks .products-sort-container .products-sort-options a.active-sort {
    background-color: #F00A0A;
    }
    .sort-and-view .sortlinks .products-sort-container .products-sort-options {
    border-color: #F00A0A;
    }





    iframe.resize {width:750px;height:422px;}
    @media screen and (max-width: 600px) {
    iframe.resize {
    width:100%;
    height:auto
    }
    }


    #box_facebooklike{
    width: 288px;
    }
    .box_facebooklike_bg{
    opacity: 0;
    visibility: hidden;
    }
    .box_facebooklike_wrap{
    position: fixed;
    width: 288px;
    left: -288px;
    top: 10px;
    z-index: 9002;
    }
    .box_facebooklike_wrap .ribbon{
    width: 50px;
    height: 173px;
    position: absolute;
    margin-right: -50px;
    background: url("../images/user/facebook.png") no-repeat;
    z-index: 1;
    right: 0;
    }
    .box_facebooklike_wrap .box{
    background: #fff;
    margin: 0 !important;
    }
    .box_facebooklike_wrap .box.shaded{
    -webkit-box-shadow: -3px 3px 15px -5px #000;
    -moz-box-shadow: -3px 3px 15px -5px #000;
    box-shadow: -3px 3px 15px -5px #000;
    }

    .box_facebooklike_wrap .box iframe{
    display: block;
    width: 100% !important;
    }

    @media (max-width: 768px){
    .box_facebooklike_wrap{
    top: 0;
    bottom: 0;
    }
    .box_facebooklike_wrap .ribbon{
    width: 29px;
    height: 29px;
    margin-right: -29px;
    margin-top: 10px;
    background: url("../images/user/FB-f-Logo__blue_29.png") no-repeat;
    }
    .box_facebooklike_wrap .box{
    height: 100%;
    overflow: auto;
    }
    }


    .products.viewphot .product .prodimage .img-wrap img {
    max-height: 300px;
    }


    .login-bar {
    background-color: #FFF;
    overflow: hidden;
    }
    .login-bar a {
    color: #000;
    display: inline-block;
    padding: 0;
    font-weight: normal;
    font-size: 1.2em;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 35px;
    text-transform: uppercase;
    }

    header .logo-bar .search-form .search-input {
    height: 36px;
    min-height: 36px;
    }
    header .logo-bar .search-form .btn {
    height: 36px;
    width: 36px;
    }
    header .logo-bar .basket {
    height: 36px;
    line-height: 36px;
    min-width: 220px;
    padding: 0 1em;
    }
    header .logo-bar .search-form .btn {
    border-left: medium none;
    border-radius: 0;
    padding: 0;
    }
    header .logo-bar .search-form .search-input {
    border-radius: 0;
    border-right: medium none;
    }

    .menu .innermenu .menu-list li.home-link-menu-li a {
    background-color: #dddddd;
    }

    //modyfikacja lista produktow
    @media screen and (max-width: 767px)
    {
    .rwd .main #box_mainproducts .products .product {
    height: auto !important;
    padding: 0;
    margin: 0;
    }

    .rwd .main #box_mainproducts .products.viewphot .product .product-inner-wrap {
    padding: 0em;
    }

    .products.viewphot .product .prodimage .img-wrap img {
    max-height: 500px;
    }
    }




    /*video banner*/
    video {
    width: 100% !important;
    height: auto !important;
    }

    .sc_video-tag {
    position: relative;
    overflow: hidden;
    }

    .sc_video-tag__video-off {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    }


    .sc_video-tag {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
    }

    .sc_video-tag video {
    position:absolute;
    top:0;
    left:0;
    width:100%;

    @media screen and (max-width:767px) {
    .rwd .main #box_mainproducts .viewphot .product{
    width: 33%;
    padding-bottom: 50%;
    position: relative;
    }
    .rwd .main #box_mainproducts .viewphot .product .product-inner-wrap {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    }
    .rwd .main #box_mainproducts .viewphot .product .prodimage {
    margin: 0;
    }
    .rwd .main #box_mainproducts .viewphot .product .product-inner-wrap,
    .rwd .main #box_mainproducts .viewphot .product .prodimage span{
    display: flex;
    justify-content: center;
    align-items: center;
    }
    .rwd .main #box_mainproducts .viewphot .product .prodname,
    .rwd .main #box_mainproducts .viewphot .product .buttons,
    .rwd .main #box_mainproducts .viewphot .product .price{
    display: none;
    }
    }

    height:100%;
    }
     
    Marcel, Nov 26, 2017
    #3
  4. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    REWELACJA !
    genialny tajemniczy pomocniku ! dzięki !

    PS a gdybym chciał jednak dać jakiś minimalny odstęp w poziomie między miniaturami ?

    rozumiem że między wierszami taki odstęp musi zostać ? - załącznik

    :)
     

    Attached Files:

    Marcel, Nov 26, 2017
    #4
  5. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    podaj maila dobry człowieku i wybierz sobie blachę !

    D Z I Ę K U J Ę !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
     
    Marcel, Nov 26, 2017
    #5
  6. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    podaj namiar proszę !

    ps. 48% i jest ok ale ten margin 5 czy 10 nie zmienia odstępu.....jest taki sam
     
    Marcel, Nov 26, 2017
    #6
  7. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    Dziekuję ! odezwij sie prosze !
     
    Marcel, Nov 26, 2017
    #7
  8. Marcel

    Marcel Uczestnik

    Messages:
    29
    Likes Received:
    1
    Jeszcze raz dziękuję Ci tajemniczy fachowcu :)

    odezwij się proszę. chciałbym sprezentować Ci blachę :)

    PS. pytanie z innej beczki.

    Da się przenieść opis kategorii pod produkty ?
    Standardowo jest tak że opis kategorii który jest mi potrzebny tylko do pozycjonowania jest pod kreską na górze.
    Wygląda to mało efektownie. Chciałbym żeby był pod produktami, na dole. Da się ?

    pozdrawiam serdecznie
    Marcel
     
    Marcel, Nov 27, 2017
    #8
  9. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Messages:
    3,087
    Likes Received:
    302
    Wymagać to będzie edycji w plikach .tpl szablonu. Sprawdziłem Twój sklep, ale nie znalazłem żadnej kategorii z opisem. Czy możesz podać mi link do kategorii produktów, w którym widoczny będzie opis. Postaram się go przenieść.
     
    Mariusz, Nov 27, 2017
    #9

Share This Page