Edit the mobile version

[damian]

Hi,

I’m putting the finishing touches to my website http://www.gingermagic.com/

As I’ve added a header, I’d like to change the display of the top section when it’s viewed on a phone.
I can see the file called responsive.min.css (in /assets/css of the parent themse) is controlling this.

Adding and editing a responsive.min.css file to the child theme does not change things.
Do I have to edit the file in the parent theme?

If so, I assume I start with the responsive.css file. What do I have to do to make that a ‘min’ file?

Thanks
Damian

Topic

[Jason Bobich]

Hello,

You always want to put your overriding CSS changes in your Child theme. You don’t need to edit any of these minified files. If you’re using the sample child theme included with the theme, this could go in your custom.css file of your Child theme. If you’re looking in responsive.css, you can see how the theme targets different viewport sizes with @media queries. You can do the exact same thing from your custom.css of your Child theme.

So, in other words take the parts of responsive.css you want to change, and copy them to your Child theme’s CSS to override.

[damian]

Thanks Jason,

I tried that first fut it didn’t seem to be working. It looked like the parent responsive.min.css settings were loading after the child’s custom.css. Maybe I made a mistake? I’ll try again.

[Jason Bobich]

With how the sample child theme implements custom.css in functions.php by manually hooking it to “wp_head” and not enque’ing it like other stylesheets, that shouldn’t be possible. The custom.css should come after everything, no matter what. Double check and let me know if that’s not the case.

[Author]

Replies