Adding @media queries in Child theme custom CSS

[justyle]

Follow up question to this. If we want to add media queries to a child theme, how do we go about that. I had copied other theme and responsive (along with minified versions) and edited them in the child directory. But none of those changes seemed to register and it still seems to reference the parents CSS.
If I follow the instructions above and use custom.css how should I add media queries? Must I add the whole thing or can I just duplicate the media size and the new rule?

Topic

[Jason Bobich]

Hello,

CSS always cascades down no matter what. So, whether you’re working with @media queries or not, you can always override those styles from a stylesheet that comes later.

If you’re using Swagger 2+, you can simply use your Child theme’s style.css as now this CSS file is placed after all theme CSS files.

And if you’re using Swagger 1, you’d put your custom styles in /assets/css/custom.css — And if you update to Swagger 2 with an older Child theme, you can keep the setup with custom.css, as it makes no difference, really.

If I follow the instructions above and use custom.css how should I add media queries? Must I add the whole thing or can I just duplicate the media size and the new rule?

You can do this however you want. It honestly makes no difference.

For example, this statement:

@media (max-width: 767px) {
	.whatever {
		...
	}
	.whatever-else {
		...
	}
}

Will achieve the identical result as this statement:

@media (max-width: 767px) {
	.whatever {
		...
	}
}
@media (max-width: 767px) {
	.whatever-else {
		...
	}
}

You’re just overriding CSS. So, how you group styles in @media queries doesn’t matter,

I had copied other theme and responsive (along with minified versions) and edited them in the child directory.

There’s no reason to do anything with minified styles.

But none of those changes seemed to register and it still seems to reference the parents CSS.

Post a link to what you’re doing, and I’d be glad to check it out. There’s usually a simple explanation in cases like this. 😉

[justyle]

Thanks for the reply.
Here is a screen shot of how I’ve set up my child theme at http://c3malmo.se (latest version of Swagger)
http://d.pr/i/ryW7
In the responsive.css stylesheet I added the following media query for the calendar found on http://c3malmo.se/events
Which uses a plugin called Events Manager

/* Event Calendar */
	.numberCircle { font: 16px Arial, sans-serif; }
	table.fullcalendar tr { height: 75px; }

[Jason Bobich]

Aw, I see what you’re trying to do. — You can’t copy CSS files from the theme and have them override anything by simply having them exist in the Child theme. In WordPress this is only for main template files like style.css, index.php, page.php, etc.

Notice how if you were to view the source of your site, the stylesheet you’ve copied to your Child theme isn’t being used?

All of your custom CSS edits should go in the style.css file of your Child theme. So if you want to edit something from responsive.css, you’d copy it to style.css of your Child theme.

Right now your Child theme’s style.css is empty:

http://c3malmo.se/wp-content/themes/swagger-child/style.css

[justyle]

Right, OK. Thanks =)

[Jason Bobich]

Also, I would suggest changing the name of your Child theme to something other than “Your Child Theme” in style.css. Theme options are saved based on this theme name, and so later on down the road if you try to change that, you’re going to see that you need to re-configure your theme options. (see article)

[Author]

Replies