Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

I am having an issue with my header not stretching all the way across the wordpress website. I am using a 2013 theme.

I am having an issue with my header not stretching all the way across my wordpress website. I am using a 2013 theme. How can I customize this header so it will fit large displays? The website address is: www.monikaandersondesign.com/wordpressblog thanks so much

Marco Boretto
Marco Boretto
29,821 Points

hey, what is not stretching? The header element seems to me to be stretched. Then it's composed by two subelements: a link and a div containing the navigation. Is this one not stretching from your point of view?

cheers

Thanks so much for your response. I am realizing now it is not the issue with the header it is the issue with the logo.

1 Answer

Your problem is your theme is using the background image method to display this image, then alloting a fixed width to it of 1400 px.

Add this to your CSS file:

.site-header { background-size: (YOUR DESIRED WIDTH) auto; }

and you can make it as wide as you want.

However, you will have some new problems with the image re-sizing...

I can't remember off the top of my head, but there will be a way to clip the img. Something to do with the following CSS:

.site-header { background: url(http://www.monikaandersondesign.com/wordpressblog/wp-content/uploads/2016/07/cropped-monikaandersonheaderflowerslongerwithlogo1.jpg) no-repeat scroll top; }

To be clear, the problem only appears at widths > 1400px, which is really wide already - so I don't know if you have a problem to solve!