Kiitos! Tuota, mihin tuota kannattaisi tarjota? Kokeilin tuohon kuvaliitteen koodipätkän ”.has-header-video .custom-header-media iframe” jälkeen, mutta se ei tuntunut ymmärtävän sitä (koodi jäi mustaksi, muut ovat violetin värisiä).
Tohon samaan noiden muiden kanssa joo. Pitäisi kyllä olla ihan hyvin tuettu, eri juttu sitten ymmärtääkö Notepad.
Mulla tuo toimii kyllä paremmin tuolla position: fixed;-asetuksella. Rajaus on toki vähän hölmö; poistamalla sieltä sen width: 100%; siitä tulee vähän parempi.
Mutta oletan, että haluat että kuva näkyisi mobiilistikin koko leveydeltään? Siinä tapauksessa ei auta mikään object-fit tai muu, vaan ongelma on ton kuvan korkeus.
Selektorilla .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header on määritelty height: 75vh; joka pakottaa tuon kuvan noin korkeaksi.
Tuohon jos säätää kiinteän korkeuden ja poistaa kuvalta position: fixed-asetuksen, niin sitten kuvaa näkyy sopivasti – mutta sitten törmätään tietysti siihen, että se kiinteä korkeus toimii vain tietyillä ruudunleveyksillä. Että sinänsä tuo nykyinen malli on ihan kelpo kompromissi.
Jos haluaa tuota otsikkokuvaa mobiilissa vähän pienemmäksi – ihan kelpo ratkaisu sekin, en tiedä miksi sen pitää olla yli puolen ruudun kokoinen – voi laittaa tuon 75vh:n tilalle auto.
Kiitos kovasti avusta!
Koitin näitä kaikkia ja sain kuvan kokoa muutettua. Haasteeksi muodostui se, että kun kuvan pienensi leveydeltään ruudulle sopivaksi, paljastui kuvan alapuolelle harmaa laatikko, joka lienee jonkinlainen pakotettu tilavaraus kuvalle. Ja yhdelle ruutukoolle optimoituna, toinen ruutukoko näytti sekavalta.
No jos yrittäisin toisella tavalla eli pitäisin kaiken muuten ennallaan, mutta laittaisin kuvan näkymään alkaen vasemmasta laidasta? Nythän se näyttää aina kuvan keskikohdan. Eli kun tuossa kuvassa on ”pääkohta” vasemmassa laidassa, niin jos sen saisi näkymään niin tämä olisi ratkaistu riittävällä tasolla.
Olisiko tähän vielä ajatusta? 🙂
Löysin tuohon äskeiseen ideaan ratkaisun:
Selaimessa teeman ”oma CSS” kohtaan tämä koodi, niin se siirtää kuvan niin oikealle kuin mahdollista, jolloin kuvan vasen reuna on näkyvissä myös mobiililaitteilla:
@media screen and (max-width: 520px) {
.has-header-image .custom-header-media img {
width: auto;
position: absolute;
}
}
Alkuperäinen linkki:
https://wordpress.org/support/topic/left-align-header-image/
Kiitokset Mikko avusta! 🙂
