[Resolved] hero image changes width when text overlay is added

Home Forums Support [Resolved] hero image changes width when text overlay is added

Home Forums Support hero image changes width when text overlay is added

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #688356
    Elisabeth

    Hi there
    Me again… I’m learning loads here using GeneratePress and I really appreciate the help so thanks for letting me come back so often.
    I’ve created an element for a hero header, with plan being to have text overlaying the header image which is black on the lefthand side (where the text should sit) and features a person sitting to the right side of the image. You can see the image as I actually want it to appear in the ‘reviews’ page in the main nav on the link I’m sending you.
    When I set the featured image for an individual page it works fine – it’s in a container and is 2000wide by 600high (px) which is what I want.
    However, when I use that same image, sized the same, in the header/hero element as a custom image and then overlay it with some CTA text the image seems to zoom and get displayed much larger so that the person on the right side of the image disappears of the screen altogether.
    You can probably tell this from the source code but:
    1) I’ve set up the image as 2000×600 px.
    2) The container width is, I believe, 1388px wide – mainly because ‘a friend told me to’ which is pretty pathetic, but full disclosure and all that!
    3) I’ve been setting the padding for the text overlaying the image using % in the header element settings, as this seemed to work slightly better than using px as I’d originally been doing.
    4) I’ve currently only done settings / changed the defaults in the header element for the full screen version, not started trying to figure out the idea padding for mobile screens yet.
    5) I have read through the documentation and hunted around online for video and other tuts but am still foxed by what I’m doing wrong.

    I’d appreciate any suggestions or corrections!
    Elisabeth

    GP Premium 1.7.2
    #688639
    David
    Staff
    Customer Support

    Hi there,

    so first off the Hero elements height is set by the content within it.
    Padding is then added to that.

    Background images are set to cover. This ensure that the hero is filled. So as the hero increases in height the image has to scale up to accommodate that.

    Are the other pages e.g Reviews going to contain no content? I can help in a few ways to keep the sizing consistent. Let me know

    #689829
    Elisabeth

    At the moment we just plan to have a hero header with text overlaid on it on the front / home page, not the other pages (which will – for the foreseeable future – draw their header image from the set featured image for that page).

    #689843
    David
    Staff
    Customer Support

    OK so as you’re not using a Full width hero then we can contain the image.
    In the Header Element there add hero-contained to the element classes field.

    Then add this CSS:

    .hero-contained {
        background-size: contain;
    }

    You can then add that class to any header elements that are using that image.

    #690143
    Elisabeth

    Hmmm… When I do that I get an error message:

    expected (<bg-size>#) but found ‘contained’

    #690231
    David
    Staff
    Customer Support

    Ooops my bad, i edited the code above 🙂

    #690411
    Elisabeth

    That helps with the text/image in the large (full screen) version, but it messes up the text in the tablet and mobile versions. Also, if you look at the private url sent earlier you’ll see a gap now appears between the bottom of the nav bar and the top of the picture. #
    Once again – thanks so much for your time.

    #690412
    Elisabeth

    It may be I haven’t yet sorted out the mobile text overlay settings in the relevant element – will just look at that. But the problem with the space between bottom of nav bar and top of image is there in the desktop version too when looked it via the customizer.

    #690417
    Elisabeth

    Also, there’s a gap between the bottom of the hero image and the top of the left sidebar – and I want them to be right next to each other.
    I think this may be because I’m using an image that is 600px high when the recommended height for a hero image is 900px – could it be this that’s causing the problem? I definitely don’t want a higher image so I’m wondering if I need to reset the size for that space somehow.

    #690437
    Elisabeth

    I’ve set the padding for the image/hero container (not entirely sure which the padding relates to) in the element in % rather than px. Possibly it’s taking 900px as the total and working the percentages out based on that?

    #690441
    David
    Staff
    Customer Support

    Hi there,

    remove the CSS that i provided. And in the Header Element > Hero settings change the background position to right center and then i can relook at the padding requirements

    #690443
    Elisabeth

    That gives me a much higher image – and cuts off a chunk of the black on the left side of the image. See the difference between the home/about page and the ‘reviews’ page which is the same image on.
    I think we’re getting there though.
    Thanks.

    #690449
    David
    Staff
    Customer Support

    You can reduce the image height by reducing the top and bottom padding %.
    But to match it in size exactly to the featured image on the reviews page won’t be possible. As the home page image size will be defined by the content overlaying.

    #690457
    Elisabeth

    Okay. I’m going to have a little think about this – may be coming back with another question in a while…

    #690491
    David
    Staff
    Customer Support

    A way to keep the image height consistent would be to design the Home page header Element. We can measure that height.
    Then add Header Elements for your images on the other pages, and we can apply a minimum height to them so they are all consistent.
    But you may want to consider first how the home page image will work on mobile with the text overlay.

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.