My Child Theme CSS Isn't Working

Question

I have a child theme of the twenty seventeen theme. The problem i'm having is that my child theme css isn't working. I have checked the page source and the css file for my child theme is loading but doesn't seem to be overriding the parent theme css.

If I add the code into the theme additional css box it works. However when I put it into the child themes css file it doesn't.

I've read up on the correct way to enqueue child theme styles but it's all getting a bit confusing. The current code in my child theme's functions.php file is as follows.

    <?php
// Enqueue the parent and child theme stylesheets
if ( !function_exists( 'my_theme_enqueue_styles' ) ):
    function my_theme_enqueue_styles() {
        $parent_style = 'parent-style';
        wp_enqueue_style( $parent_style, get_parent_theme_file_uri( 'style.css' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

// Enqueue child them js file
add_action( 'wp_enqueue_scripts', 'child_theme_js' );
function child_theme_js() {
  wp_enqueue_script( 'child-theme-js' , get_stylesheet_directory_uri() . '/child-theme-js.js' , array( 'twentyseventeen-global' ) , false , true );
}

Is there anything wrong with this code that you can see?

The page i'm working on is https://dev.theartofsongs.com/about/

The page should have css to make it full width but it isn't working

Thanks for your help

Ali

Answer 1

You CSS is working and overriding the parent CSS. So its not an issue with the enqueue, that is all working fine.

I don't know what you want to make full width but you are currently targeting a div within the content. If you want to make the entire content area full width try adding something like this.

.wrap {
    max-width: 100%;
    padding-left: 3em;
    padding-right: 3em;
}

On a side note, if you use your browser's inspector by hitting f12 it makes debugging these types of things a breeze.