Responsive css loading before child theme

  • Resolved rnbronstein

    (@goobybunny)


    10 years, 11 months ago

    Hi, Fruitful!

    First of all, thank you for this fantastic theme. It’s incredibly robust and easy to use and has made my first experience building a website a wonderful experience!

    I have a question about the woo.css file under the “woocommerce” directory. Because I removed category images, it looks bad to have the mobile version have the min height of 315 px, as the original theme has it. So I tried fixing it in my own custom style.css file in my child theme, but that didn’t work. I noticed you had put it in a separate file for the responsive woocommerce theme, so I tried doing that — like the original Fruitful, my custom css for mobile is tagged for the correct media size in a file labeled woo.css under a woocommerce directory.

    I tried marking the min-height as “none !important” or doing “max-height: 50 px !important” but none of that worked. Having the same code in my style.css file or the custom css editor on wordpress itself has similarly negligible results.

    It seems like the parent theme is loading first, because the original css is still there, and it’s overriding any of my custom changes. I tried temporarily deleting the woo.css file from Fruitful, which fixed it (I moved the rest of the responsive css to my child theme so that would all be preserved) — but that doesn’t seem like a good long-term solution, right? (Safari and Chrome both display a 404 error that they couldn’t find the file, naturally, since it wasn’t there. Even though they both went on to find the correct one, I feel like that’s bound to slow things down.)

    How can I get my custom woo.css to load first?

    Thanks so much!

    Link: https://builds.rachelbronstein.com/product-category/charts/composers/
    (Looks fine on desktop, just has giant boxes on mobile)

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter rnbronstein

    (@goobybunny)

    Update: I got it to work by changing the function fruitful_get_responsive_style in functions.php — specifically:

    function fruitful_get_responsive_style () {
    $style_ = $back_style = $woo_style_ = ”;
    $theme_options = fruitful_ret_options(“fruitful_theme_options”);

    wp_enqueue_style(‘fonts-style’, get_template_directory_uri() . ‘/inc/css/fonts-style.css’);
    if (isset($theme_options[‘responsive’]) && ($theme_options[‘responsive’] == ‘on’)) {
    wp_enqueue_style(‘main-style’, get_stylesheet_uri());
    wp_enqueue_style( ‘woo-style’, get_stylesheet_directory_uri() . ‘/woocommerce/woo.css’); *

    From get_template_directory_uri.

    *(then it goes on to describe the fixed styles but I abridged it here for brevity’s sake)

    But this same code won’t work when placed in my child theme’s functions.php file. Anyone have any idea why?

    Thread Starter rnbronstein

    (@goobybunny)

    Derp. Because I only pasted part of it and didn’t include that massive wall describing the rest of the mobile style with the dropdown menu and all. So I tried adding this in to my child theme:

    add_action(‘fruitful_get_responsive_style’, ‘fruitful_get_my_style’, 99);
    function fruitful_get_my_style {
    if (isset($theme_options[‘responsive’]) && ($theme_options[‘responsive’] == ‘on’)) {
    wp_enqueue_style(‘main-style’, get_stylesheet_uri());
    wp_enqueue_style( ‘woo-style’, get_stylesheet_directory_uri() . ‘/woocommerce/woo.css’);
    } else {
    wp_enqueue_style(‘main-style’, get_stylesheet_directory_uri() .’/fixed-style.css’);
    wp_enqueue_style( ‘woo-style’, get_template_directory_uri() . ‘/woocommerce/woo-fixed.css’);
    }
    }

    Which breaks my site.

    I’m a total beginner and have been coding for all of three weeks so I probably have missed something. I’ll just change the fruitful function for now, but it would be good to know how to fix this in my child theme to override it so I don’t have to keep manually fixing it any time there’s an update.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive css loading before child theme’ is closed to new replies.