Overriding media queries for particular width - CSS

Question

I have created a sub-theme of Responsive Bartik and I need to reduce the width of sidebars without touching the original theme:

Original:

@media all and (min-width: 851px) {
.
.
.
  #sidebar-first {
    width: 25%;
    margin-left: -100%; /* LTR */
  }
  #sidebar-second {
    width: 25%;
    margin-left: -25%; /* LTR */
    clear: none;
  }
.
.
.
}

CSS in sub-theme:

/* Raj: To reduce the width of the sidebar: */
@media all and (min-width: 851px)
{
    #sidebar-first {
        width: 18% !important;
        margin-left: -92% !important; /* LTR */
    }
    #sidebar-second {
        width: 18%;
        margin-left: -32%; /* LTR */
        clear: none;
    }
}

To my surprise the original CSS is taking effect. Except for the media queries any other css properties I am able to override. If I change 25% to 18% and -100% to -92% in the original css file itself I am getting the desired result, but I am not able to figure out how to override these values in another css file.

I tried to google but all I am getting is regarding the priorities in media queries but nothing regarding overriding.

Edit: I have added the new CSS file using .info file of the sub-theme. Below are the contents of respective .info file. I have followed a drupal documentation to create sub-theme. However, I dont really feel this is a problem in Drupal's architecture but overriding CSS Media query has to be done in a different way probably, the reason for this conclusion is because any other css attributes in custom.css file are being rendered with exception of overridden media query.

Original:

name = Responsive Bartik Tiles
description = Tile based flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

scripts[] = js/collapsible-menu.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik_tiles"
datestamp = "1413392482"

Sub-theme:

name = Indian Snakes Responsive Bartik Tiles
description = Indian Snakes Tile based flexible, recolorable theme with many regions and a responsive, mobile-first layout.
version = VERSION
core = 7.x

base theme = responsive_bartik_tiles

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css
stylesheets[all][] = css/custom.css

scripts[] = js/collapsible-menu.js

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by Drupal.org packaging script on 2014-10-15
version = "7.x-1.0"
core = "7.x"
project = "responsive_bartik_tiles"
datestamp = "1413392482"

The only difference is the addition of line -

stylesheets[all][] = css/custom.css

in sub-theme's .info file.

Answer 1

1. If you are adding this css through drupal_add_css

   drupal_add_css( '/path/to/css.css', array( 'weight' => '9999', ) );

2. Keep css file exactly same as the parent theme.

3. If still problem persists then please disable CSS caching - clear the cache and check it one more time.

4. Another option See if you are exactly mentioning sub-theme path in sub-theme's .info file or in the various import statements.

Answer 2

There is a trick, that you can use for this kind of overrides.

Eg. you have a base theme, with a file base/css/donotwant.css , in your child theme's .info file you have to specify stylesheets[all][] = donotwant.css and it will be magically excluded.

After that, you can code the styling in a way you want in your child theme.

Answer 3

My bad! There was an extra ';' at the beginning of the media query. Due to this only media query overrides were not being executed. Apparently an extra ';' would probably mean the end of css I guess, do not know why rest of the css was never considered!