Michael Smith

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="http://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 “http://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 http://sandbox.michaelsmithportfolio.com/ and I know it works.

Not a problem.

Happy to help.

Happy to help

Good luck

Riyita,

Would it be possible to get you to post a link to the site instead of a screen shot? It would make it easier to help.

hello n3v3rm1nd

Would it be possible for you to post the web address so we can see the problem your talking about? It would really help.

For Option 1 You don’t need to buy anything if you use a Google font. They are distributed at no cost. You just need to pick one an follow the instructions on the site.

For Option 2 Add all new CSS to the bottom of the child theme styles.css.

Hi ameredith

This might be a bit easier, if a bit longer.

First you need to find the page id of your home page. You can do that by watching this https://www.youtube.com/watch?v=fLg2T1AvmFE

Next, add the following code to your styles.css sheet. If you look at the second rule you will see an “X” for the page id. You need to change that the home page id. So if your home page id is 6 than the rule is .page-id-6 #header… etc.

This will let your logo display on the homepage, but it will not appear on other pages, nor will it screw up the spacing in the header.

#header #logo {
    margin-right: 1em;
    visibility: hidden;
}

.page-id-X  #header #logo {
    margin-right: 1em;
    visibility: visible;
}

One quick but important note on modifying the style.css file of your theme. When you update your theme that file will almost certainly be overwritten and all the custom code you added will be erased. It would be better to add this to a child theme or download a plugin like this one https://wordpress.org/plugins/simple-custom-css/ that lets you add a custom css sheet. That way you are better protected when you update your theme.

Best of Luck
Mike

Hello Olivia,
Took me a second to track down that problem, but I think this will help you. It looks like you are using a static image as your background header so I can offer you two things to try.
First you can try removing the background image in the header and changing the header to a font instead. If you don’t like the fonts I suggest you look at google fonts https://www.google.com/fonts You can install a new font on your site very quickly. This is probably the easiest choice, and is better for SEO.

The other option would be to use media queries to have the header background change size based on the browser window. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries The rest of the image on your page use these queries so I would bet a style sheet didn’t make the transfer from .com to .org. In your case you would add the media queries to your child theme style.css file.

I’m Sorry, I wish I could be more specific but I just don’t have a good way to test these ideas from the outside looking in. Best of luck