Currently in the process of adding images to my WordPress pages and I notice that the header/featured image sizes for the home page and the other site pages are set to be the same percentages (i.e. top and bottom are 15%, the sides are blank/default). This problem happens across desktops, tablets and mobile screens.
But I appear to be having a differing height between say, the home page and the About page. Had a look at the documentation for the Header Element and examples and have also been tweaking but no luck so far.
While I can manually tweak the percentages and eyeball the result I sadly can’t line it up exactly, and I can only input whole percentages. I am also worried that it’ll perform unexpectedly at some resolution I haven’t been able to test.
Can anyone help clarify why similar settings might be behaving differently?
yes the simplest way for only an image background is to use % padding. With no content in the header its reasonably simple. Just calculate the original image ratio as a % by dividing its height by its width. Then apply that % as the total top and bottom padding to the header element.
For the headers with content you would need to deduct the height of the Element – in your case the H1 is 65px on desktop, from the image height before calculating the %.