0

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

0

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 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 :) – RiddleMeThis Apr 16 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 at 16:46
  • Take the float right off .entry-content - #primary .entry-content {float: none !important;} Something like that. – RiddleMeThis Apr 17 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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