Editing Responsive CSS Files

[ClaytonDaniels]

I want to edit the responsive.css files in the flexform/css directory, but I want to do so using the child theme.

I have the child theme activated and I am using it to edit the styles on style.css. However, I know want to make adjustments to the responsive.css file that resides in flexform/css/responsive.css.

I figure that if I make a css folder inside my flexform-child directory, and stick the responsive.css file in that, add an import statement to the file, it should work, right? That’s the way the style.css works.

Here is what I have:

I have a file called flexform-child/css/responsive.css… in that file I have the following line:
@import url(“../../flexform/css/responsive.css”);

That should activate that file in my child directory and any styles I change should overwrite the styles in flexform/css/responsive.css.

This isn’t happening though, what am I missing?

Thanks!

[Kyle – SUPPORT]

Hi

There is no need for all of this, you can add the responsive css changes in your child theme style.css file. I tend to just add my media queries and the bottom of the file. The changes you make here will overwrite the responsive.css styles.

Hope this helps!

– Kyle

[ClaytonDaniels]

Right, I would expect that to work as well… but it doesn’t seem to be.

In my /flexform/css/responsive.css file, I have the following code

@media only screen and (min-width: 1250px) {
	/* LAYOUT */
	.boxed-layout {
		width: 1230px;
	}	
}

I want that width changed to 1200px, so in my /flexform-child/style.css, I add

@media only screen and (min-width: 1250px) {
	/* LAYOUT */
	.boxed-layout {
		width: 1200px;
	}	
}

The desired effect does not take effect, chrome dev tools inspect element still shows .boxed-layout as 1230px.

The html head tag show my linked css files as such:

<link rel="stylesheet" id="main-css-css" href="http://localhost/nkaddwp/wp-content/themes/flexform-child/style.css" type="text/css" media="screen">
<link rel="stylesheet" id="responsive-css-css" href="http://localhost/nkaddwp/wp-content/themes/flexform/css/responsive.css" type="text/css" media="screen">

Therefor, regardless of what I do to /flexform-child/style.css, the responsive.css file will always overwrite it, unless it is moved above the reference to /flexform-child/style.css in the header tag.

So, it would seem there is a need to do what I suggested in the original post since I cannot seem to edit any of the responsive files…

[Kyle – SUPPORT]

In that case you would need to use !important’s.

– Kyle

[ClaytonDaniels]

In that case?

You mean, in EVERY case if users are using your themes, since the responsive.css file will, according to the theme’s code, ALWAYS come AFTER the child style.css.

Modification request for your next update to this theme:

Make certain that the STYLE.CSS in the child theme is the VERY LAST CSS FILE so that we may be able to make CSS style changes the way your theme promotes that we are able to do.

[Swift Ideas – Ed]

@ClaytonDaniels – Unfortunately that isn’t possible, due to the way child themes work. The responsive CSS is needed to load after the style.css.

If you want to place CSS that is loaded after, then please add CSS to the custom css box within theme options.

– Ed