Edit media queries

[Boris]

Hi guys,

How can I edit the media queries to comply with Bootstrap’s Media Queries?

Thanks!

[Alyssa]

@boris-kamp We do not support BootStrap, sorry.

[Boris]

@tjchester,

That no problem, but I am wondering if I can adjust the media query breakpoints by myself somehow?

[Alyssa]

@boris-kamp I’m not quite sure exactly what you are talking about can you elaborate?

[Justin]

I am currently up against this as well. I need to change the media query break points. Since device sizes and resolutions change and evolve, the break points on my project cannot be arbitrary to the layout being developed.

I need to change the 720px media query break points to something else (836px most likely in my case).

If the Buddyboss theme CSS was available as SASS, LESS, etc with the break points set in a variable, I could simply change the variable in 1 line of code and move on… (hint hint)

Since that isn’t the case though (sad face), I need to do whatever is necessary. I tried copying over all the Buddyboss CSS files into my child theme (along with my custom.css file) and changing each media query reference in each file… but alas the CSS files in my child theme are not overriding the files from the parent theme (second sad face).

Is my only option to alter the break points in the parent theme CSS files and thus put me in the position to have to change the media queries anew with each parent theme update?

Any insight would be greatly appreciated (even if it’s that I haven’t had enough coffee this morning and I’ve missed the obvious)

Thanks!

[Varun Dubey]

hi @orionis23 it just like writing the complete css again for complete theme

Regards

[Justin]

Hello Varun.

Thank you for responding, but I’m afraid I don’t understand you.

Are you saying that it is not possible to override the parent theme’s various CSS files in a child theme, and that the only solution is to edit the parent theme instead of a child theme?

[Justin]

If I copy over the ENTIRE parent theme CSS into the child theme’s custom.css file, wouldn’t I be causing the ENTIRE site’s CSS to load twice… the first time (from parent theme) being completely overruled by the second time (from child theme)?

Obviously that’s not an option, especially just to change a handful of lines of code (the media queries).

Is there a specific reason why wordpress.css (for example) in the child theme CSS folder doesn’t load when present INSTEAD of the parent theme’s wordpress.css file?

Am I missing something? (Wouldn’t be the first time!)

[Varun Dubey]

Hi @orionis23, you need to wp_deregister_style parent css and register child theme additional css file to avoid to load them two times.
Hopefully this link will help you to get the clear idea.
http://wordpress.stackexchange.com/questions/163301/versioning-import-of-parent-themes-style-css
Regards
Varun Dubey

[Justin]

Thanks again, I understand how to deregister the stylesheets of the parent theme… I just didn’t think that it would have to come to that.

Why is the theme not automatically doing this for parent theme CSS files copied into the child theme CSS folder the same way it does for all of the other files in the root child theme folder, all the files in the child theme’s buddypress folder, etc..?

If there isn’t a technical or arguable philosophical reason for excluding the CSS folder from child theme
overrides, then I can make a “feature” request.

[Alyssa]

@orionis23 WordPress does not typically use file location references for stylesheets like other template files because they constantly change and moving them to the child theme will break the styling of the theme when you update. Unfortunately this is not a feature we would consider to add because of the nature of these files, as Varun has recommended you will need to deregister the styles.

[Justin]

Thanks for the insight TJ.

We’ve since realized that by the changing the media query breakpoints to be based on our layout’s needs as opposed to screen sizes (a moving target) we put ourselves in a position to not be able to quickly or safely update the parent theme anyway, precisely because those parent theme stylesheets may be constantly changing as you point out.

In fact looking deeper into it, we’ve realized that the parent theme updates seem to regularly introduce changes to template files that we would routinely customize in a child theme as well (members-header.php and members.php for example in the latest update)… so we have accepted that updates just won’t be a trivial endeavor with child themes where we’ve done anything other than a few basic tweaks (in which case we would probably be better off just using the customizer anyway and avoiding a child theme altogether.)

Thanks again guys for the attention… hats off to the great support.

[Alyssa]

Any time, glad to help. I’ll close this out so if you have any further support issues please open a new topic.