Title: Responsive header not working
Last modified: August 21, 2016
---
# Responsive header not working
* [oliviaontheriviera](https://wordpress.org/support/users/oliviaontheriviera/)
* (@oliviaontheriviera)
* [12 years ago](https://wordpress.org/support/topic/responsive-header-not-working/)
* Hi guys,
I am running the suits theme on my blog [http://www.oliviaontheriviera.com/](http://www.oliviaontheriviera.com/)
My header image used to be responsive to mobile devices, ipads etc when the site
was hosted on wordpress.com but ever since I moved to wordpress.org it no longer
is, plus there are white bits on the side. Can somebody please explain how to
fix the responsiveness and white bits issue and WHERE I should do it exactly?
I have created a child them and a style.css file but its not clear for me where
one needs to make changes to code once the child theme is created. I’m a beginner!!
Thank you so much.
Viewing 15 replies - 1 through 15 (of 56 total)
1 [2](https://wordpress.org/support/topic/responsive-header-not-working/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/responsive-header-not-working/page/3/?output_format=md)
[4](https://wordpress.org/support/topic/responsive-header-not-working/page/4/?output_format=md)
[→](https://wordpress.org/support/topic/responsive-header-not-working/page/2/?output_format=md)
* [Michael Smith](https://wordpress.org/support/users/msmith993/)
* (@msmith993)
* [12 years ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002572)
* 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](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](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
* Thread Starter [oliviaontheriviera](https://wordpress.org/support/users/oliviaontheriviera/)
* (@oliviaontheriviera)
* [12 years ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002644)
* Dear Michael.
Thanks for your reply. Yes I am using an image as my header that
worked just fine when I was on wordpress.com. So if I understand correctly: option
1: I change to font and I have to buy a web license of my font. option 2: I get
into the style.css file and this is where I get lost and don’t understand anything
🙂 I’m going to read up on the link you sent me and hope I understand what to
do. My question is if I have to change the stylesheet code where do I do this?
Do I make a new stylesheet on based on the old one and upload into the child
theme folder? Thanks
* [Michael Smith](https://wordpress.org/support/users/msmith993/)
* (@msmith993)
* [12 years ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002650)
* 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.
* Thread Starter [oliviaontheriviera](https://wordpress.org/support/users/oliviaontheriviera/)
* (@oliviaontheriviera)
* [12 years ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002729)
* Hi Michael,
My font (Futura light) is not available for free on google fonts.
For option 2: this is what the code of my child theme style.css currently looks
like: `/* Theme Name: Suits Child Theme URI: [http://www.themeweaver.net/demo/suits-child/](http://www.themeweaver.net/demo/suits-child/)
Description: Suits Child Theme Author: Theme Weaver Author URI: [http://www.themeweaver.net/](http://www.themeweaver.net/)
Template: suits Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar,
responsive-layout, accessibility-ready Text Domain: suits */
* [@import](https://wordpress.org/support/users/import/) url(“../suits/style.css”);
* /* =Theme customization starts here
————————————————————– */ Do I just add any
changes after this line and it will keep importing the rest from the original
style.css or do I need to copy the entire content of the stylesheet from the
main theme? Thnaks, Olivia
* [Michael Smith](https://wordpress.org/support/users/msmith993/)
* (@msmith993)
* [12 years ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002739)
* Oswald light is close to Futura light. There won’t be an exact match [http://www.google.com/fonts/specimen/Oswald](http://www.google.com/fonts/specimen/Oswald)
* As for the CSS just put the bits you need in the child theme css.
* Browsers read the CSS sheets from the top down so, if you add a duplicate rule
to a css sheet the browser will use the rule that is written last, barring some
kind of specificity conflict which I’m not going to get into unless I need to.
* The [@import](https://wordpress.org/support/users/import/) url(“../suits/style.
css”); tells the child theme to import and use all of the css from your parent
theme. Then it will start looking at and applying the CSS from your child theme
using the rule that it reads last. Just add all the new stuff below the
/* =
Theme customization starts here ————————————————————– */ text and you should
be fine.
* DO NOT try to update the parent CSS unless you:
A. have a copy of it BEFORE
YOU START and B. Are confident you know what you’re doing. (I learned that last
bit the hard way)
* Thread Starter [oliviaontheriviera](https://wordpress.org/support/users/oliviaontheriviera/)
* (@oliviaontheriviera)
* [11 years, 12 months ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002784)
* Thanks Michael will give option 2 a go and let you know how it goes 🙂
* Thread Starter [oliviaontheriviera](https://wordpress.org/support/users/oliviaontheriviera/)
* (@oliviaontheriviera)
* [11 years, 12 months ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002785)
* found the media queries in my main theme stylesheet , it has values in there
for mobile devices,should i change these in the child theme style css?
* _[ Many lines of CSS moderated. please either post a link to the CSS directly
or use [pastebin.com](http://pastebin.com/) and post that link her instead. ]_
* [Michael Smith](https://wordpress.org/support/users/msmith993/)
* (@msmith993)
* [11 years, 12 months ago](https://wordpress.org/support/topic/responsive-header-not-working/#post-5002803)
* 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.
* ```
#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 