Title: Where is "responsive.css"??
Last modified: August 22, 2016

---

# Where is "responsive.css"??

 *  [nittyjee](https://wordpress.org/support/users/nittyjee/)
 * (@nittyjee)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/)
 * Trying to build a site, and trying to change how it responds to changing the 
   width of a browser window. In chrome I right-click and choose “inspect element”
   and for the dive “header-right” it shows that the width is changing based on “
   responsive.css?ver=3.9.2*”. I have no idea what that is. When I select the style
   sheet, it shows “@media screen and (max-width:1240px)” at the top. I am able 
   to change things, but I have no idea where to find the responsive.css sheet in
   wordpress. Anyone know where it is so I can edit it??
 * Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Thread Starter [nittyjee](https://wordpress.org/support/users/nittyjee/)
 * (@nittyjee)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/#post-5217917)
 * oops, forgot to include the link to the website!
    It’s for a particular theme,
   and I have not been able to find responsive.css anywhere in the “editor” menu.
 * Site:
    [http://amesmakerspace.thenittygritty.org/](http://amesmakerspace.thenittygritty.org/)
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/#post-5217930)
 * Hi, Nitty:
 * If you hover your mouse over the responsive.css link on the right pane of Chrome
   DevTools, the file path will pop up as a tool tip. If you actually click on that
   link, it will switch you over to the Source pane, where you will see the contents
   of the CSS file, and the rule which
 * Having said that, you should not be editing the theme’s files directly. If the
   theme gets updated because of feature enhancements, bug fixes, or security patches,
   then your changes will be lost. Instead, either create a [child theme](http://codex.wordpress.org/Child_Themes)
   or use a CSS plugin like Jetpack or [Custom CSS Manager](http://wordpress.org/plugins/custom-css-manager-plugin/).
   If you are just making CSS changes, then use a plugin, it’s a bit easier. Or 
   if you theme has a custom CSS option, you can use that as well.
 * The media query is what makes the theme responsive. Media queries store CSS rules
   which are in effect when the screen width is a certain size. For the media query
   that you quoted, if the screen width is less than or equal to 1240px, then the
   CSS rules which are located in that section will take effect.
 * If you look at the contents of responsive.css, you’ll see 4 different media query
   sections, one for 1240px, another for 960px (about the width of a tablet), 760px,
   and the last at 400px (cell phones). If you look for the rule(s) for header-right
   in each section, you can see how the width changes from 700px, to 540px, to 400px,
   to 300px, at the different screen widths.
 * So to make your own changes, what you would do is to create your own overriding
   rule in either your child theme’s style.css file, or in your custom CSS plugin.
   Let’s say you want to change the font size of header-right when viewed through
   a cell phone to something bigger. The current size is 11px and you want to make
   it 15px. You could write a rule like this:
 *     ```
       @media screen and (max-width:400px)
       {
          #header-right .tile-title {
             font-size: 15px;
          }
       }
       ```
   
 * So, to reiterate, you don’t want to change the CSS in the theme’s CSS file, but
   write your own overriding CSS, either in a child theme’s style.css file or through
   a plugin. If you have problems getting your CSS rules to override the existing
   CSS, read up on [CSS specificity](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).
 *  Thread Starter [nittyjee](https://wordpress.org/support/users/nittyjee/)
 * (@nittyjee)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/#post-5217983)
 * Fantastic, thank you.
    This is a good tip, I always get frustrated with worrying
   about updating the theme and losing everything and having to restore a backup.
 * So I suppose I can create an overriding custom css… but where is “responsive.
   css” in the first place, in wordpress? I am able to see the source in chrome,
   but I can’t find it in the list of css and php docs in the editor list. It would
   be good to at least know where the code is coming from!
 * thanks
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/#post-5217987)
 * > but where is “responsive.css” in the first place, in wordpress?
 * No, it’s one of the files that’s part of the Cinematix theme:
    [http://amesmakerspace.thenittygritty.org/wp-content/themes/Cinematix/css/responsive.css](http://amesmakerspace.thenittygritty.org/wp-content/themes/Cinematix/css/responsive.css)
 *  Thread Starter [nittyjee](https://wordpress.org/support/users/nittyjee/)
 * (@nittyjee)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/#post-5218108)
 * Thanks a lot, I was able to edit my site, you saved my life… was about to do 
   if through the ftp, the custom css manager makes things easier since I can just
   do it in the browser 🙂
 * By the way, is there a similar thing for php editing? I believe that php files
   are created with the theme too.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/#post-5218110)
 * It looks like you copied over the entire reponsive.css file over into your Custom
   CSS plugin. You don’t really need to do that, you only need to copy over the 
   rules that you are going to change, because any rules that you add in the Custom
   CSS plugin will override any rule with an identical selector in the responsive.
   css file. It doesn’t really hurt anything to keep those copied lines in there,
   but it will make your site load a little bit slower since it has to load all 
   of those repetitive rules.
 * > By the way, is there a similar thing for php editing?
 * Unfortunately it’s not quite that easy with the PHP files. It’s still not that
   difficult. If you want to make a change to a PHP file, then you need to create
   a [child theme](http://codex.wordpress.org/Child_Themes), copy the file that 
   you want to change from the parent theme folder into your child theme’s folder,
   then make your changes to that copy. You would then activate your child theme,
   and it should work just the same as the parent theme.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Where is "responsive.css"??’ is closed to new replies.

 * 6 replies
 * 2 participants
 * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/where-is-responsivecss/#post-5218110)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics