[Resolved] question about hero and grid

[Yola]

Just a brief question to check: I struggled with a page hero using the CSS for “example 3” on this page https://docs.generatepress.com/article/page-hero-examples/. I could not get the block to move to the right. In the inspector I saw no trace of columns or “grid-area right” or anything else indicating a position/width in the code for my site.

I saw somewhere on the GP site that you’ve changed the underlying system and use flex now more often. I don’t know enough about coding to understand the implications of this so just wanted to make sure these changes do not affect the examples like the ones mentioned above.

I thought I could achieve a similar result by using the standrd WP cover image and adding blocks to it. This allows you to set your focus point, which is an advantage. With portraits in headers people risk getting beheaded, paradoxically, and the focus point may save them. But obviously I cannot make generic headings then (which I couldn’t anyway as I don’t know which tags/code to use to make the post title appear).

So the GP elements-header has serious advantages and I’d like to use it, only so far I cannot get it to do what I want (I did study the documentation, which is very helpful).

Thanks for your help, Yola

The site I’m working on is only a couple of weeks old so is using all the latest versions.

[David]

Hi there,

can you link me to the site where i can see what you have so far?

[Yola]

Thank you for your quick response David. I’m sorry, I can’t provide a link to what I was trying to do, the site was already live and I’ve deleted all my attempts. I’ve gone for a simpler thing that works. The site is tint-nijmegen.nl and the headers are in all the 9 posts e.g. here https://www.tint-nijmegen.nl/fijnschilderen/. Menu/list with links to all 9 posts is in the footer. There’s one header/hero for all of them, using featured image and post title.

I’ve used percentages for top and bottom padding, hoping that would work best for all screen sizes, assuming that with fixed numbers in pixels the headers would be huge on phones. But I must admit much of the size-and-scale aspect eludes me when it comes to responsive headers.

It would be helpful to understand more of how and why the images scale as they do. I still have one beheaded couple, and others lose their heads -and regain them- when the screen is reduced more and more. As there is a maximum size for the page-container (1100px) one would expect the image to stick at the size it has at 1100 px as this is the maximum width. But when the window is enlarged to show more background on both sides the header image too keeps growing in height so that full-screen on my iMac I see hardly any text underneath.

In itself this is no problem as very few people use such large screens but I’d like to have more control.

I’d also like to know, just for information, whether the code on the page I referred to is indeed still valid in principle. I use GP a lot for sites so it will come in useful one day.

[sometimes the image becomes a background for the whole post/page but that disappeared when I saved the post once more, emptied caches etc.}

[Leo]

It’s really hard to tell without seeing the issue live.

The page hero background image size is determined by the padding and that’s it.

Couple solutions that comes to mind:

– Reposition the background image with CSS on mobile.

– Use a mobile-specific background image for mobile with CSS.

If you can show the problem again, I can let you know which method would work the best.

[Yola]

Hi Leo, apparently I wasn’t very clear.

I had a problem getting a header to work as per example 3 on this page https://docs.generatepress.com/article/page-hero-examples/. From what I read on the GP site on using flex -a new development- I just wanted to make sure the examples for code on that page are not affected by that change. I don’t know understand enough about grids and flex to be able to tell. That I couldn’t get the header to work may easily have been my own fault, so it was just to rule out the possibility that something on that page still needed an update. Just an information question no more.

Meanwhile, as the site I work on is a live site I decided to avoid the problem by making very simple headers. For those headers (in fact it is just one header used in 9 posts) I would like to get a better idea of how to control the size of the background image. For instance, how come it gets larger even if the width of the container has reached its maximum (i.e. 1100 px)? Also, I used percentages for top and bottom padding, as I supposed that would work best for scaling -am I right?

The links to the site were in my previous message::

The site is tint-nijmegen.nl and the headers are in all the 9 posts e.g. here https://www.tint-nijmegen.nl/fijnschilderen/. Menu/list with links to all 9 posts is in the footer. There’s one header/hero for all of them, using featured image and post title.

[Leo]

I just wanted to make sure the examples for code on that page are not affected by that change.

The method should still work.

As for your current page header, using percentage is a good idea.

I used the browser simulator tool to view it in responsive view and it seems to all work?

[Author]

Posts