1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

W TRAKCIE 3 miniatury w linii w RWD

Dyskusja w 'Zmiana wyglądu sklepu i edycja zaawansowana' rozpoczęta przez użytkownika Marcel, 26 Listopad 2017.

  1. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    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
     
  2. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    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 :) !
     
  3. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    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%;
    }
     
  4. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    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

    :)
     

    Załączone pliki:

    • zrzut.png
      zrzut.png
      Rozmiar pliku:
      348,6 KB
      Wyświetleń:
      466
  5. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    podaj maila dobry człowieku i wybierz sobie blachę !

    D Z I Ę K U J Ę !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
     
  6. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    podaj namiar proszę !

    ps. 48% i jest ok ale ten margin 5 czy 10 nie zmienia odstępu.....jest taki sam
     
  7. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    1
    Dziekuję ! odezwij sie prosze !
     
  8. Marcel

    Marcel Uczestnik

    Wiadomości:
    29
    Docenione treści:
    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
     
  9. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    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ść.
     

Poleć forum znajomym