WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] twentyfourteen-child is not working

[Resolved] twentyfourteen-child is not working

  • Here is what the twentyfourteen-child style.css looks like:

    /*
    Theme Name: Twenty Fourteen Child
    Theme URI: http://wordpress.org/themes/twentyfourteen
    Description: Twenty Fourteen Child Theme
    Author: WPMU
    Author URI: http://wpmu.com
    Template: twentyfourteen
    Version: 1.0.0
    */
    @import url(“../twentyfourteen/style.css”);
    /* =Theme customization starts here
    ————————————————————– */
    .page-content {
    margin: 0 auto;
    max-width: 100%px;
    }
    ——————–End of code ———————

    The default max-width is 474px. On the original style.css if I change max-width: 100%px; then the text on page shows wider. when I leave the original at 474 and change the child to 100%, nothing happens.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Because this is a css issue sharing the website url can help.
    What I can assure you is that max-width: 100%px; is an invalid css rule and using it will cause unexpected results in different browsers.
    Here are some info about max-width

    Based on recommendation that 100%px is invalid, changed to 950px.
    the original theme style.css = max-width: 474px;
    the child theme style.css = max-width: 950px;
    Each time I change oode in style.css, I restart Web Server Service and clear browser cache.

    2 Tests conducted
    1st without child style.css.
    on original style.css = max-width: 950px;
    web page showed wider text as expected.

    2nd with child style.css.
    on original style.css = max-width: 474px;
    on child style.css = max-width: 950px;
    Web page stays at 474 and does not go to 950px as expected

    here is child style.css code
    /*
    Theme Name: Twenty Fourteen Child
    Theme URI: http://wordpress.org/themes/twentyfourteen
    Description: Twenty Fourteen Child Theme
    Author: WPMU
    Author URI: http://wpmu.com
    Template: twentyfourteen
    Version: 1.0.0
    */
    @import url(“../twentyfourteen/style.css”);
    /* =Theme customization starts here
    ————————————————————– */
    .page-content {
    margin: 0 auto;
    max-width: 950px;
    }
    ————————–End of Code —————-

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    If your Child Theme is not working try testing it with something more obvious like:

    body {
     border: 10px solid red !important;
    }

    added body code and red boarder did appear. this means that the child style.css is setup correctly. If this assumption is wrong, let me know.
    Next – I commented out the code that I copied and manally typed in.
    Test did not change width of text as expected. here is child style.css

    /*
    Theme Name: Twenty Fourteen Child
    Theme URI: http://wordpress.org/themes/twentyfourteen
    Description: Twenty Fourteen Child Theme
    Author: WPMU
    Author URI: http://wpmu.com
    Template: twentyfourteen
    Version: 1.0.0
    */
    @import url(“../twentyfourteen/style.css”);
    /* =Theme customization starts here
    ————————————————————– */
    /*
    .page-content {
    margin: 0 auto;
    max-width: 950px;
    }
    */
    body {
    border: 10px solid red !important;
    }
    .page-content {margin: 0 auto;max-width: 950px;}

    The actual code from twentyforteeen’s stylesheet is this:

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    margin: 0 auto;
    max-width: 474px;
    }

    That’s 5 items having their max-width set to 474px. If you use the equivalent in your child stylesheet the max-width will probably change. I’m betting this might work too:

    .site-content .entry-content {
    margin: 0 auto;
    max-width: 950px;
    }

    This may not be best practice but here is a test that worked.
    Since the process of child entries is a copy from original and paste to child or add other code, I copied the complete style.css original and pasted to the child. Then I changed .page-content max-width: 950px. I left the red boarder so that I know I’m looking at the child and not the original. this seems to have worked. Is there any issue with this approach?

    Since we have confirmed that that child is working. I’m going to close this thread. Thanks everyone for your help.

    esmi

    @esmi

    Forum Moderator

    I copied the complete style.css original and pasted to the child

    No – that’s completely the wrong way to go about it, The child theme’s stylesheet should only contain your changes and nothing else.

    esmi – thank you for your help. I have removed original code from child to follow best practice. I’m continuing this discussion on thread “How To Process a change in a theme-child”. Please join me there. Thank You.

    pyjamaman – thank you for your help. It appears your recommendation worked. Please go to new threard, “How To Process a change in a theme-child”. I’ll finish up discussion there. Thanks again.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] twentyfourteen-child is not working’ is closed to new replies.
Skip to toolbar