1

I have a standard.css file, which is from a template design I downloaded. I have another custom.css, which I modified specific CSS tags contained in standard.css. I do not want to modify the standard.css file.

Within my standard.css file is a media query that I want to remove with the custom.css file. How can I get the custom.css file to discard a media query in the standard.css file?

I know I can override each value of the query to its pre-query value, but that is a lot more work and I do not know all the values to do so. This is one example, but I have many other media queries in the standard.css file, so making overriding on each value would be very hard.

@media (min-width: 1200px) {
  .timeline > li {
    min-height: 170px;
  }
  .timeline > li .timeline-panel {
    padding: 0 20px 20px 100px;
  }
  .timeline > li .timeline-image {
    width: 170px;
    height: 170px;
    margin-left: -85px;
  }
  .timeline > li .timeline-image h4 {
    margin-top: 40px;
  }
  .timeline > li.timeline-inverted > .timeline-panel {
    padding: 0 100px 20px 20px;
  }
}
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
user2012677
  • 5,465
  • 6
  • 51
  • 113
  • You can't 'discard' rules in CSS, only supercede them in specificity. Your only other option is to programmatically remove the media queries from the stylesheets at runtime via JS. – Mitya Jan 25 '19 at 17:12
  • What behavior have you got so far? Which styles are applying at the breakpoint specified? In theory if you override a rule with the value you want it should apply yours (as long as you have defined it after the original or you are using `!important`) – IvanS95 Jan 25 '19 at 17:13
  • Can you supersede the entire query? not parts? – user2012677 Jan 25 '19 at 17:13
  • Possible duplicate of [How can I override Bootstrap CSS styles?](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles), or if the Bootstrap stuff throws you, [How do I prevent CSS inheritance?](https://stackoverflow.com/q/958170/215552) – Heretic Monkey Jan 25 '19 at 17:20

1 Answers1

1

Unfortunately you can't. You need to either override each value, or delete the rules from the original file. If the original file is not under your control, take a copy of it and remove the styles then load that copied css file instead.

NeilWkz
  • 245
  • 1
  • 8