Teen sivua https://jaakkojseppala.github.io/ . Miten saisin asemoitua nuo kohdissa palveluni, hinnasto ja yhteydenotto olevat laatikot siten, että ne olisivat vaakasuunnassa keskellä, ja tietenkin siististi niin, että ne eivät mene päällekäin?
Jos haluat käyttää suoraan Bootstrapin ulkoasukomponentteja (joita nyt näytät jo käyttävän), niin pistät nuo laatikot käyttämään css-luokkaa "col-md-4", jolloin ne täyttää kolmistaan juuri ympäröivän elementin.
Sittenhän voit laittaa tuon ympäröivän elementin vaikkapa elementin sisään, joka ei täytä tuota koko aluetta:
<!-- tämä on uutta merkkausta -->
<div class="row">
<div class="col-md-1"><!-- bootstrapistä löytyy myös push/offset-määre, jota en jaksanut tätä nopeaa esimerkkiä varten sinulle kaivaa. Voit tehdä sen itse -->
</div>
<div class="col-md-10">
<!-- uusi merkkaus loppuu tähän -->
<!-- eli kaikki tästä alaspäin on sinun jo tekemiä jutskendaaleja, ainoastaan col-lg-3 muutettu col-lg-4:ksi. lg-4 tarkoittaa siis large (iso deskarinäyttö), ja 4 on kahdestatoista palstasta (=100% leveys) 4 eli 4/12, eli tasan kolme palstaa mahtuu tällä leveydellä alueelle -->
<div class="row">
<div class="col-md-6 col-lg-4 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4 class="title"><a href="">Matematiikka</a></h4>
<p class="description">Pystyn opettamaan ja tutkimaan matematiikkaa. Olen opettanut lapsia, nuoria ja aikuisia peruskoulusta yliopistoon.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-file"></i></div>
<h4 class="title"><a href="">Tilastotiede</a></h4>
<p class="description">Olen opiskellut tilastotieteen peruskursseja avoimessa yliopistossa ja soveltanut tilastotiedettä ohjelmointiin.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-tachometer"></i></div>
<h4 class="title"><a href="">Ohjelmointi</a></h4>
<p class="description">Olen kehittänyt junioritasolla erilaisia ohjelmistoja Javalla, HTML:llä, CSS:llä, JavaScriptillä, Pythonilla, C#:lla ja Cobolilla. Olen kiinnostunut erilaisista projekteista.</p>
</div>
</div>
</div>
<!-- sinun tekemät jutskendaalit loppuvat tähän -->
<!-- ja täällä lopussa on tietysti sulkevat tägit uusia wrappereitä varten -->
</div>
</div>Joo. Näyttäisi toimivan. Täytyy vaan opetella kunnolla tuota Bootstrapiä. Nyt nuo yhdet laatikot näkyy nätisti. Täyty opetella toisten laatikoiden keskitys vielä.
Elementtien keskitys hoidettaisiin oikeaoppisesti esim. margin: autollta, tai flexboxeilla, mutta koska se olisi kokonaan täysin eri luku oppimateriaalissa, jätin ne nyt pois tästä.
Joo. Margin:auto auttoi. Vielä pari ongelmaa näkyi. Kännykällä tuo ensimmäinen kuva on liian iso. Samoin kännykässä tuon kohdan "Töistäni saama palaute" varjon kirjaimet näyttävät menevän päällekäin.
Jaska kirjoitti:
Joo. Margin:auto auttoi. Vielä pari ongelmaa näkyi. Kännykällä tuo ensimmäinen kuva on liian iso. Samoin kännykässä tuon kohdan "Töistäni saama palaute" varjon kirjaimet näyttävät menevän päällekäin.
Ensimmäinen kuva as in hero-kuva?
Sillä on korkeus 100vh, mikä tarkoittaa, että se on koko selaimen kokoinen ( 100vh ~ 100% viewport height ), joten jos haluat sen pienemmäksi, laita lukua pienemmäksi.
Voit myös laittaa elementtien css-määreitä erilaisiksi, eri kokoisille laitteille. Tällöin apuun pitää ottaa css media queries:
.mun-oma-css-luokka {
background-color: green;
}
@media only screen and (max-width: 600px) {
.mun-oma-css-luokka {
background-color: lightblue;
}
}Aihe on jo aika vanha, joten et voi enää vastata siihen.