How to use responsive CSS with Akita Child Theme

[parris]

Basically, I think my question is the same as here : http://support.themeblvd.com/forums/topic/adding-media-queries-in-child-theme-custom-css/

But I can’t see the support staff’s answers (because I only have Akita). So I need to ask in a new topic.

Anyway, I just updated Akita from 1.0 to the latest version, and I see that having responsive.css in my child theme doesn’t work anymore. What is the correct file and method to put my @media css?

Thanks,

Parris

Topic

[Jason Bobich]

Hello,

Simply copying responsive.css to your child theme would have never overridden the other CSS file. WordPress child themes don’t work like that; you’d have to equeue the new version in your child theme.

Or maybe I’m misundstanding and you meant you copied from responsive.css to your child theme’s stylesheet? If so most of the responsive styles were rewritten in 2.0. So you’d need to reevaluate your edits. Instead of doing a mass copy, it’s better to individually target the areas you want to change.

For the basic setup of how to target the different viewport sizes with @media queries, just checkout the responsive.css file of the theme.

[Jason Bobich]

And here’s my answer from the other thread:

======

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.

[Author]

Replies