Hallo @baggi45
und wieso hast du die „mobile Darstellung“ aus der Anleitung nicht umgesetzt?
Hallo Angelika
Ich habe den mobilen Part im style.css genau so wie in der Anleitung.
Also
************************
@media screen and (max-width: 1024px) {
.headerimg {
width:100%;
margin: 0;
}
}
@media screen and (max-width: 767px) {
.headerimg {
min-height:250px;
background-size:800px auto;
}
}
@media screen and (max-width: 480px) {
.headerimg {
min-height:150px;
background-size:480px auto;
}
}
***************
Gerne würde ich das Style.css schicken, aber ich weiss nicht wie man hier einen Anhang beigibt?
Baggi45
Hallo @baggi45
die style.css sieht man dort.
Die CSS-Anweisungen werden allerdings nicht geladen und ich konnte sie nicht im Developer-Modus des Browsers finden.
Hast du das Child-Theme richtig per functions.php eingebunden? Dort noch einmal die Anleitung für 2017 -> https://make.wordpress.org/training/handbook/lesson-plans/theme-school/child-themes/child-themes-twentyseventeen/
Außerdem solltest du .home .headerimg (für Startseite) bzw. .home .headerimg, .headerimg (für Startseite plus andere Seiten) verwenden.
<?php
/**
* Theme Coder Child functions and definitions
*
… so sieht meine function.php aus
habe ich aus einer Anleitung und es funktioniert – wenigstens ohen die Header Grössenanpassung
ist diese function nicht ok?
Baggi 45
* @package Theme Coder
*
*/
/**
* Enqueue scripts and styles.
*/
function theme_coder_child_scripts() {
// Enqueue Parent Stylesheet
wp_enqueue_style( 'theme-coder-parent-stylesheet', get_template_directory_uri() . '/style.css' );
} // theme_coder_child_scripts
add_action( 'wp_enqueue_scripts', 'theme_coder_child_scripts' );
/* You can add your own php functions and code snippets below */
Deine functions.php sieht richtig aus.
@baggi45
steht in deiner functions.php am Anfang kein <?php
Also so:
<?php
/**
* @package Theme Coder
*
*/
Wahrscheinlich hast du es nur verkehrt hier hinein kopiert, sonst würdest du (bei aktiviertem Child-Theme) eine weiße Seite erhalten.
Ändere den CSS-Code in der style.css:
@media screen and (max-width: 1024px) {
.headerimg {
width:100%;
margin: 20;
}
}
in
@media screen and (max-width: 1024px) {
.headerimg {
width:100%;
margin: 20px;
}
}
Ich würde das so lösen
statt
@media screen and (max-width: 1024px) {
.headerimg {
width:100%;
margin: 20;
}
}
@media screen and (max-width: 767px) {
.headerimg {
min-height:250px;
background-size:800px auto;
}
}
@media screen and (max-width: 480px) {
.headerimg {
min-height:150px;
background-size:480px auto;
}
}
diesen CSS-Code verwenden:
@media screen and (max-width: 1024px) {
.home #masthead .headerimg {
max-width:100%;
width: calc(100% - 40px);
margin: 20px;
}
}
@media screen and (max-width: 767px) {
.home #masthead .headerimg {
min-height:350px;
background-size:cover;
}
}
@media screen and (max-width: 480px) {
.home #masthead .headerimg {
min-height:200px;
background-size:cover;
}
}
Code ist nur für die Startseite.
Entsprechend nach obigem Muster musst du die Media-Queries für die page-ids anpassen, und dabei auch das #masthead einfügen, z. B. -> .page-id-532 #masthead .headerimg
Ich setze das Thema damit hier auf gelöst. Deine Frage, woran das liegen kann, sollte damit beantwortet sein. Für weitere CSS-Fragen ist ein CSS-Forum thematisch besser geeignet.
