ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Flexform
• March 3, 2014 at 7:47 pm #53689
  ClaytonDaniels

  Member

  Post count: 8

  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!

  March 4, 2014 at 10:31 am #53864
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 4, 2014 at 3:26 pm #54041
  ClaytonDaniels

  Member

  Post count: 8

  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…

  March 4, 2014 at 4:02 pm #54058
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  March 4, 2014 at 4:21 pm #54075
  ClaytonDaniels

  Member

  Post count: 8

  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.

  March 4, 2014 at 4:34 pm #54088
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  @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

• Back to forum

  Posted in: Flexform