Keskustelu: Nettisivujen teko: Miten tehdään responsiivinen kolmen sarakkeen sivu?

Testisivu

Löysin netistä koodin, jolla sivun columnit jakautuvat näin:

25%, 25%, 50%

Ihme sinänsä, että löysin koodin - ja se jopa toimii.

Ongelmana on, että columnit eivät solahda alekkain, kuten niiden pitäisi, vaan tapahtuu vain responsiivista pienenemistä.

Miten nämä saisi (hyvissä ajoin, koska vasemmanpuoleiset columnit ovat kapeita) solahtamaan tietyssä pisteessä alekkain? Tämä on tavan mukaan yksinkertainen kysymykseni.

Minulla on sivun yhteydessä tukku tyylitiedostoja, mutta tämä uusi juuri tätä edellämainittua 3 Columnin koodia hallitseva tyylitiedosto on tämä:

Tyylitiedosto

Kiitoksia.

sinun tulee tehdä erikseen media query css:ään, jossa määräät elementtien leveydeksi 100% jos leveys muuttuu pienemmäksi kuin desktop -tilassa.

Eikö juuri tuon uuden tyylitiedoston alaosassa ole media query. Ja muuttelenpa siinä arvoja miten vain, se ei vaikuta mitään.

Noin muuten juuri koodailu ei ole minulla tältä osin hallinnassa.

Sulla on nimet col-one, col-two ja col-three, mutta tuossa kapeammalle ruudulle tarkoitetussa versiossa col-left ja col-right. Näin ne ei luonnollisestikaan vaikuta. Lisäksi lopussa on jostain syystä avattu @media, mutta ei toimimattomuus siitä johdu.

Kun nuo korjaa niin toimii ihan hyvin.

Kiitokset. Lisäsin paddingiakin laidoille, niin että teksti ei mene kiinni laitoihin.

Jostakin syystä tämä ei tällä hetkellä toimi netissä oikein, mutta kotikoneellani kutakuinkin täydellisesti. Jatkan huomenna ja katson, onko tässä enää mitään epäselvää.

Tunturisusi kirjoitti:

Jostakin syystä tämä ei tällä hetkellä toimi netissä oikein, mutta kotikoneellani kutakuinkin täydellisesti. Jatkan huomenna ja katson, onko tässä enää mitään epäselvää.

Täällä päässä ainakin kuvasuhteet vääristyvät, joka korjaantuu helposti siivoamalla IMG-elementtien kokoatribuutit (width, height) pois.

Jotenkin tuntuisi loogisemmalta asettaa kolumnit päälle vasta tarvittaessa:

@media screen and (min-width:/*breakpoint tähän*/) {
.col-one,
.col-two {
  float: left;
  width: 24%;
  margin-right: 2%;
}
.col-three {
  float: left;
  width: 48%;
  margin-right: 0;
}
}

Ainakin koodia tulee vähemmän :)

Kiitokset tuosta koodiavusta Osmo. Paneudun siihen. (Eli heti tämän vastauksen kirjoitettuani)

Huomasin myös, että kuvissa ei saa olla noita pituuksia ja leveyksiä - olen poistellut niitä sivujeni kuvista viimeiset 2 vuotta, ehkä noin 15 000 kuvaa.

Impala

Siirsin impalaan tämän uuden systeemin, ja toimii kuten kuuluukin.

---------------------------

Näyttäisi, että juuri tähän käyttäämääni versioon on netissä annettu väärä media screen koodi:

Responsive 3 Column Layout

Alin versio 1/4 + 1/4 + 1/2 responsive 3 column layout. Siksi minulla kai oli sitten ihan väärä koodi, jonka Grez korjasi. Olin tämänkin itse heti huomannut, että ottamassani koodissa ei ollut noita kolmea nimikettä - kuten piti, mutta en osannut tehdä mitään. (Vai otinko sitten sivulta väärän koodin, joka tapauksessa case is closed)

Kiitokset.

Suosittelen, että tutustut Bootstrappiin tai Flexgridiin.

Saat helposti suoritettua noita divien jakaumia ja muita niiden avulla. Voit myös käyttää CDN linkkiä headerissa.

Kiitos suosituksesta, Bootstrapin otin suosikkeihin.