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.

// 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' ) );
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


  • what CSS is supposed to make the page full width? It looks like its working to me. Apr 16, 2019 at 16:35
  • You're targeting the wrong element. You've made #main full width but it's wrapped in a wrap class div that has a max width of 1000px
    – mrben522
    Apr 16, 2019 at 16:38
  • Your CSS isn't specific enough: developer.mozilla.org/en-US/docs/Web/CSS/Specificity Apr 17, 2019 at 1:18
  • This has changed since he originally asked Apr 17, 2019 at 13:49

1 Answer 1


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

enter image description here

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.

  • Hi thanks for your help. It suddenly started showing correctly for some reason. I'd cleared the cache previously so i'm not sure why. I've modified my CSS file now to the settings you suggested. I do however just want to use that css for my full-width template. I've used the following code: body.page-template-full-width .wrap { max-width: 80%; padding-left: 3em; padding-right: 3em; } Is that the best way of doing it?
    – alierrett
    Apr 16, 2019 at 17:41
  • Yes, targeting the template by using the body class WP provides is a good solution, that's why the class is there :) Apr 16, 2019 at 17:43
  • Having looked at this again today, the browsers inspector is the wrap is now full width but it's not centred and I can't seem to get it to do so. What would I need to do to the code to get it to be centred?
    – alierrett
    Apr 17, 2019 at 16:46
  • Take the float right off .entry-content - #primary .entry-content {float: none !important;} Something like that. Apr 17, 2019 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.