[Resolved] Page header inconsistency between element types

Home Forums Support [Resolved] Page header inconsistency between element types

Home Forums Support Page header inconsistency between element types

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #914921
    Tony

    Hi there,

    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?

    Thanks in advance,
    Tony

    #914944
    Tony

    Kind of figured it out… I think the h1 heading is shifting the size of image by a certain amount. Which I suppose is actually the intended interaction.

    Can I make it so it is consistent in terms of aspect ratio of the displayed image no matter the heading font size or however many lines of text are in the header?

    #915185
    David
    Staff
    Customer Support

    Hi there,

    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 %.

    There isn’t unfortunately a way to automatically do this without Javascript but this would cause a jump on the page as the image was re-rendered.

    #915805
    Tony

    Hmm gotcha, thanks for the help.

    #916916
    David
    Staff
    Customer Support
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.