Muotoilu single product -sivulla

  • Ratkaistu lllaaa

    (@lllaaa)


    8 vuotta, 9 kuukautta sitten

    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.

    Sivu, jonka kanssa tarvitsen apua: [kirjaudu sisään nähdäksesi linkin]

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

    (@msaari)

    8 vuotta, 9 kuukautta sitten

    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.

    Thread Starter lllaaa

    (@lllaaa)

    8 vuotta, 9 kuukautta sitten

    Kiitos, toimii!

Esillä 2 vastausta, 1 - 2 (kaikkiaan 2)

Keskustelu ‘Muotoilu single product -sivulla’ on suljettu uusilta vastauksilta.