Support » Teemat ja mallit » Muotoilu single product -sivulla

  • Resolved lllaaa

    (@lllaaa)



    Yksittäisen tuotteen sivulla olevan tuotteiden määrän valitsimen osat rivittyvät omituisesti: miinusnappula omalle rivilleen, numero ja plusnappula toiselle riville. Ks. http://www.pakmelo.fi/tuote/pellintoimilaite-m9116-aga-1n4/

    Ei vaikuttaisi johtuvan ruudun koosta eikä selaimesta, eikä ylipäätään elementtien leveydestä. Levensin palstaa, jonka sisällä tuotetiedot ovat, ei auta. Levensin div:iä, jonka sisällä nappulat ovat, ei auta. Voiko vika siis olla nappuloiden rivityksessä, ja missä siihen pääsee kiinni? Alkavat johtolangat loppua.

    The page I need help with: [log in to see the link]

Esillä 2 vastausta, 1 - 2 (kaikkiaan 2)
  • Moderator Mikko Saari

    (@msaari)

    Vika on siinä, että siellä on välissä

    <label class="screen-reader-text" for="quantity_5a2772d012f9a">Määrä</label>

    jolla on display: block;, eli se asetellaan omalle rivilleen. Koska tuo on screen-reader-text, olettaisin ettei sen ole tarkoitus näkyä siinä ollenkaan, eli nyt puuttuu se CSS, joka taikoisi tuon näkymättömiin.

    Lisääpä CSS-tiedostoon tällainen:

    .screen-reader-text {
        border: 0;
        clip: rect(1px,1px,1px,1px);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal!important;
    }

    niin jo alkaa toimia.

    Kiitos, toimii!

Esillä 2 vastausta, 1 - 2 (kaikkiaan 2)
  • The topic ‘Muotoilu single product -sivulla’ is closed to new replies.