Support » Themes » Header Grösse ändern

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Hallo @baggi45
    und wieso hast du die „mobile Darstellung“ aus der Anleitung nicht umgesetzt?

    Thread-Starter baggi45

    (@baggi45)

    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.

    Thread-Starter baggi45

    (@baggi45)

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

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Das Thema „Header Grösse ändern“ ist für neue Antworten geschlossen.