Grey bars on the sides of my header
-
Hi there, I’m not sure when this started but there are grey bars on the sides of my header even though my theme should have the entire background as plain white. I checked to make sure that my background color is white and that my header is the required width. Please help! I am very frustrated by this appearance issue!
The blog I need help with is: (visible only to logged in users)
-
Hello there!
When I visit http://hauswitch.com/, I am not seeing the gray bars.
If possible, send me a screenshot, so I can better understand the issue. You can simply upload the screenshot to your Media Library, like any other image, and I’ll be able to access it from there. Just let me know when there’s something I should look at.
The page at the following link has some helpful tips for taking screenshots:
If you look at your site in another browser (such as Firefox), do you see the same gray bars as you do in Chrome?
Looking forward to hearing from you. Thanks very much.
-
HI there! Thanks for getting back to me! It looks the same on every browser unfortunately. I also tried it on both mac and pc. I added the screen shots to my library. Please let me know what you think!
Thank you!!!
-
Hello,
Thanks so much for those images. Very helpful to see what you’re viewing.
Please try two solutions, and let me know if this works for you:
1. Go to: https://hauswitch.wordpress.com/wp-admin
2. Click Appearance → Customize → Header.
3. Scroll to the bottom of the Header column until you see “Cover header area with image at all times” — opt in for that setting.
4. Click Save, then refresh your site in your browser and let me know how it looks.
If this doesn’t do the trick, you will want to adjust your header image to match the settings suggested in your theme’s documentation. Your header appears to be 1800 × 400. Your theme states: “Suggested width is 1800 pixels. Suggested height is 680 pixels.” Please adjust your header image accordingly, to match those dimensions.
This should do the trick.
Let me know if you have any other questions, or if I can help further. Cheers!
-
Hi there,
So I tried both of those things and it actually made the problem worse. I took another screenshot (its the most recent upload in my media library) before I switched it back. I made the dimensions 1800 X 680 and the grey spaces on the sides got bigger as you can see in the picture. PLEASE HELP!
Thanks!
-
Aha! Thanks for that helpful screenshot. The trouble is being caused by some pesky CSS code in your Customizer. I’m going to give you one additional line of code to add, to alleviate the issue.
Go to Appearance → Customize in your Dashboard, and click CSS.
Replace ALL existing text (including brown text, and CSS code) with the following:
.has-header-image #header {
background-size: auto 100% !important;
background-repeat: no-repeat;
background-color: white;
}Then Save your changes. That should do the trick. Let me know please! Thanks :)
-
-
- The topic ‘Grey bars on the sides of my header’ is closed to new replies.