Changing column size, not responsive anymore

Hi,

My address: https://www.lestrouvaillesdejosephine.fr

I have created a child theme and I am using this code in style.css in order to reduce the sidebar width from 300 to 250:

@import url("../sugar-and-spice/style.css");

/* 02. Page Layout
================================================== */
#primary {
    width: 650px;
    float: left;
}
.full-width #primary {
    width: 100%;
    float: none;
}

#sidebar {
    width: 250px;
    float: right;
}

Works fine on my PC, but not on smartphone nor mac book, the site is not responsive anymore… any idea?

Moreover I am changing the colors and the ruban pictures adding a function.php file containing (your function.php are not replaceable, so I use a trick find in the web)

/**
 * Output color scheme CSS in header
 */
function get_childTheme_url() {
    return dirname( get_bloginfo('stylesheet_url') );
}
function child_sugarspice_color_scheme() {

        $color = array(
[...]
            'emerald'   => '#e0c775', /* doré custom */
[...]
            'red'       => '#d54d63', /* Rose betsy custom */
[...]
        );

[...]

        $output .= '#nav-wrapper .ribbon-left, #nav-wrapper .ribbon-right { background-image: url("'.<strong>get_childTheme_url()</strong>.'/images/ribbon-'.of_get_option('accent_color','peach').'.png"); }';

[...]

}   

// Removes thematic_blogtitle from the thematic_header phase
function remove_sugarspice_color_scheme() {
    remove_action('wp_head','sugarspice_color_scheme');
}
// Call 'remove_thematic_actions' during WP initialization
add_action('init','remove_sugarspice_color_scheme');

// Add our custom function to the 'thematic_header' phase
add_action('wp_head','child_sugarspice_color_scheme', 3);

I don’t know if it can trouble the css.

Thanks for your help.

Ludovic