full width header not happening

Hi imcarmel, do you have a link to your website?

imcarmel,
I too am having issues with the header image not being full width. I have tried many different sized images like you, and messed around with “full width”, “default”, etc.
Hoping someone can shed some light on this issue!
ro

It’s in progress and ever changing at https://69.195.124.94/~ingamari/ the permanent link will be ingamariecarmel.com, but we’re not there yet. This header thing really bugs me, and might be a deal breaker with CC. Not sure yet. Glad to know someone else has the same problem and it’s not just me ??

marie

ps regarding the blog layout issue– it’s currently set away from the ‘magazine’ view because of the repeating images.. apparently the three images at the top relate to the first 3 posts. Still seems silly.

I am having the same issue. Any help? It says that the default size is 1000px wide. My image is exactly that but does not show up as wide as the rest of the page.

In your edit screen on the right hand side, is there a Page Attributes box? If so, try to change the template to full width, save and refresh the page!

Thanks for the suggestion. I just tried this and it doesn’t change the page at all. The page stays the same with the header about 80% of the width of the rest of the page. If reduce the size of the browser window it eventually matches up with the rest of the page but at full screen it is smaller. Any other ideas?

here is the site so you can see for yourself: https://julieanndalton.com/wordpress/

Thanks for any help you can give. I am an old Dreamweaver user and brand new to WordPress.

@jooolie3

I will try to help you out as much as I can. Firstly, I would strongly suggest moving your CSS away from inline and use a referenced stylesheet. You can find more information on how to do this here.

I see your header container is defined as 1200px in width and your image itself is 1000px in width. I would not recommend increasing the image size to fit the container as this will distort the image (you’ll lose quality).

If you change the following in your CSS:

#header {
background-image: url(https://julieanndalton.com/wordpress/wp-content/uploads/2013/04/JulieAnnDaltonBanner-WPsized.jpg);
/* background-repeat: no-repeat;*/
/* background-position: left 10px;*/
display: block; /*Added this line*/
margin-left: auto; /*Added this line*/
margin-right: auto; /*Added this line*/
}

Then also change the value here:

#header {
height: 263px;
width: 1000px;
}

You should find your header image has been centralized. This is the only valid CSS way to do it (in my experience).

Hope this helps you,

Regards,
Tareq

I am a total CSS n00b!

Which file do we edit for this code?

#header {
background-image: url(https://julieanndalton.com/wordpress/wp-content/uploads/2013/04/JulieAnnDaltonBanner-WPsized.jpg);
/* background-repeat: no-repeat;*/
/* background-position: left 10px;*/
display: block; /*Added this line*/
margin-left: auto; /*Added this line*/
margin-right: auto; /*Added this line*/
}

Which file do you edit to change this code?

#header {
height: 263px;
width: 1000px;
}

@silentarts

The file this is in is your theme’s style.css located in the root directory of your theme. However if you haven’t done so already, I would recommend creating a child theme so if your theme gets an update then your custom styles don’t get overwritten.

More information on child themes are available here.

I’d recommend the Orbisius Child Theme plugin if you want smooth, 1-click child theme creation.

Edit: There are other plugins available but this is the one I use for my projects.

I already have Orbisius Child Theme…

Apart from that… My theme’s style.css has this:

/*
Theme Name: Digifoto
Theme URI: https://wpbusinessbundle.com/themes/digifoto/
Version: 2.0.2
Author: WP Business Bundle
Author URI: https://wpbusinessbundle.com/
*/

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";
@import "css/slider.css";
@import "css/grid-slider.css";
@import "css/shortcodes.css";
@import "css/buttons-shortcode.css";
@import "css/wide-layout.css";

.widget-title {
   font-weight: bold;
}

I am unable to find

#header {
background-image: url(https://julieanndalton.com/wordpress/wp-content/uploads/2013/04/JulieAnnDaltonBanner-WPsized.jpg);
/* background-repeat: no-repeat;*/
/* background-position: left 10px;*/
display: block; /*Added this line*/
margin-left: auto; /*Added this line*/
margin-right: auto; /*Added this line*/
}

And finally, where would this code be found?

#header {
height: 263px;
width: 1000px;
}

As I said before…I am a total CSS/Coding n00b!

OK that’s cool. In your child theme’s style.css just add both of those CSS snippets to your file (under the closing } on .widget-title) and save.

Just make sure you replace the background-image property with the url to your own image, or you’ll have someone elses image on your site.

Report back, let me know how it goes.

Tareq, thanks for recommending my plugin ??

No problem @orbisius, I use it on a lot of projects…saves countless hours over time!

I am happy to hear that. ??