Kirjautuminen

Haku

Tehtävät

Kilpailu

Algoritmikisa
Putka Open 2020 -kisan
2. kierros päättyy klo 23:00!

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

Sivu 1 / 1

Sivun loppuun

Tunturisusi [21.11.2017 19:22:04]

#

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.

groovyb [21.11.2017 20:42:41]

#

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

Tunturisusi [21.11.2017 21:13:24]

#

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.

Grez [21.11.2017 21:44:41]

#

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.

Tunturisusi [21.11.2017 22:30:21]

#

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ää.

0smo [22.11.2017 10:11:17]

#

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 :)

Tunturisusi [22.11.2017 11:48:52]

#

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.

noutti [22.11.2017 16:11:20]

#

Suosittelen, että tutustut Bootstrappiin tai Flexgridiin.

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

Tunturisusi [25.11.2017 18:36:53]

#

Kiitos suosituksesta, Bootstrapin otin suosikkeihin.


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta