Remove Media Queries in CSS with Custom.css file

Question

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;
  }
}

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
– Mitya, Commented Jan 25, 2019 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
– IvanS95, Commented Jan 25, 2019 at 17:13
Possible duplicate of How can I override Bootstrap CSS styles?, or if the Bootstrap stuff throws you, How do I prevent CSS inheritance? — Heretic Monkey
– Heretic Monkey, Commented Jan 25, 2019 at 17:20

NeilWkz · Accepted Answer · 2019-01-31 09:30:59Z

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.

edited Jan 31, 2019 at 9:30

answered Jan 25, 2019 at 17:15

NeilWkz

2451 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove Media Queries in CSS with Custom.css file

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related