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 or use a CSS plugin like Jetpack or Custom CSS Manager. 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.
