You would add the new css to the child theme if that was going to work… however after looking at the css code you posted (I was in the notification email i got, before it was moderated) I dont think adding the media queries will work.
It appears this theme is a bit of a mess…
I was able to download the “Suites” theme you are using, and uploaded a header image on a sandbox site i have. No matter how you upload the image to the theme it will not be responsive because the theme treats all header images as background images and just clips off the ends as the screen gets smaller.
I found a way around the problem but it requires adding a div to the header.php file and adding some lines of code to the CSS. ALL of the changes need to be done in the child theme to protect you if you update your theme in the future.
First collect the following code in a notepad or some other text editor.
<div id="headImage">
<img src="https://sandbox.michaelsmithportfolio.com/wp-content/uploads/2014/06/SandboxHeader.jpg" alt="SandboxHeader.jpg" width="960" height="180" class="alignnone size-full wp-image-26" />
</div>
#headImage {
display: block;
float: none;
margin: 0 auto;
text-align: center;
width: 100%;
}
First you need to replace the “https://sandbox.michaelsmithportfolio.com/wp-content/uploads/2014/06/SandboxHeader.jpg” alt=”SandboxHeader.jpg” image source with the image source of your header image. You can find that in your media library.
After creating a copy of header.php in your child theme open that file in your editor.
Below the line <header id=”masthead” class=”site-header” role=”banner”> insert the new div div noted above.
Then add the new CSS rule to your child theme CSS sheet.
Sorry its not a short answer or an easy fix. Perhaps someone knows a better answer, but I have tested this at https://sandbox.michaelsmithportfolio.com/ and I know it works.
