Image size is not consistent on pages

[Edward Garrett]

Bill,
I’m using the suggested Hero image size of 2000px x 1300 px.
My challenge:
1. When I position the images in Photoshop, for the inside pages for one browser, they appear differently in all other browsers. Is there a way to make the header images appear correctly without trying to change every page?

Your attention is appreciated, as always, Bill.
THanks,
Best,
Ed

[Bill Robbins]

Hi Ed,

The hero section is set up in a way that the background image will always fill the space set for it. Since that area can be different sizes in different browsers, it will vary.

Looking at your site, It appears that you’re shooting to have an image of a lady with some text next to her on a pink background. You might consider changing the position of the image so that it is center bottom instead of the vertical and horizontal center of the area. Add this to the Custom CSS to do that:

#hero-section {
	background-position: center bottom;
}

You might also consider separating the text from the image. You could save the text as a separate PNG file and use the hero logo option for the inserting it into the page.

I did notice that the child theme is loading its stylesheet twice. It could be the child theme’s functions.php file is enqueuing the child theme’s stylesheet. You only have to enqueue the parent stylesheet. The child theme’s will automatically be enqueued.

Hope that helps out. Let me know if you run into trouble.

Take care,
Bill

[Author]

Posts