Znalazłem (część) kodu css, który kontroluje wysokość w wp-content/themes/twentyseventeen/style.css
.
Istnieje kod, który ma zastosowanie, gdy pasek administratora nie jest widoczny (typowy anonimowy użytkownik) obecnie w linii 3629
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 1200px;
height: 100vh;
max-height: 100%;
overflow: hidden;
}
I kod, który ma zastosowanie, gdy pasek administratora jest widoczny (np. Jesteś zalogowany) obecnie w linii 3646
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(100vh - 32px);
}
A następnie kod obowiązujący na telefonach komórkowych w linii 1638:
.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 {
display: table;
height: 300px;
height: 75vh;
width: 100%;
}
Kopiując te trzy sekcje css do style.css mojego motywu podrzędnego i modyfikując height
atrybut, mogłem dostosować wysokość obrazu nagłówka na stronie głównej. I aby ustawić wysokość 30vh
, calc(30vh - 32px)
oraz 30vh
odpowiednio w każdej sekcji. Pierwszy zostawiłam height: 1200px
sama.
Zwróć uwagę, że element wysokości jest ustawiany przy 100vh
rozmiarach odpowiadających wysokości rzutni. Zatem 100vh to 100% rzutni, podczas gdy 50vh to 50% rzutni.
Dziwną rzeczą jest to, że na stronie głównej powiększenie i położenie obrazu nagłówka jest inne niż na innych stronach.
Nie jestem pewien, czy to najlepszy sposób. Jestem otwarty na lepsze opcje, ale jak dotąd działa na poziomie podstawowym.
theme-twenty-seventeen
tagu, skoro wydaje się, że istnieją odpowiednie tagi z poprzednich lat.