Manipulating existing media-queries the right way

[Anonymous1234]

Hello dear reader of @hubspot,

Certain media-queries of the parent theme must be adopted so that the breakpoints of 992px should be increased up to 1375px.

I have found some ways of doing it:

1. Create child theme => add the new media-queries there but with the increased pxs to 1375px.

Issue: Is a bit of dirty way of doing it, as well as the previous declared queries do have an effect of the look hence one needs to overextend with the statements.

Question: What would be the best way of manipulating existing media-queries ? 

[Jnix284 · Accepted solution]

Hi @Anonymous1234 some themes provide the option to modify the breakpoints in theme settings, making it unnecessary to override media queries (POWER Pro is an example, this is an "advanced" feature usually only in top paid themes).

The way you're doing it by overriding in the child theme is the best way to handle it if the theme doesn't give you the option directly.

Essentially you'd copy all of the media queries from the existing CSS and add it to the child.css, then modify your values as you've indicated.

Once you overwrite them, the original media queries in the parent theme will be ignored.

While it might seem dirty, there isn't another way unless you want to fully clone the theme which I don't ever recommend because it detaches it from the marketplace and you'll lose access to updates (including vital bug fixes, new features, etc.)