Archived topic
Force photos fill a flex container in high resolutions screens
3 replies · Started by Konstantinos on September 11, 2021
Hallo and again keep up the good work you are all doing.I cant make the photos in a flex container cover all the container like the example in the product pages like the example https://www.modawood.gr/product-category/egger/ the top image in resolutions 2560x1440 for example.
Thanks again.
Hi there,
Not sure I fully understand your question.
Is this the image that having issue?
https://www.screencast.com/t/eDdDFEalmm
As I can see the flex container doesn't have any height itself since the H1 is set to display:none;.
And the image is not inside the container, they don't have parent - child relationship.
Let me know if you I miss anything.
yes this the image and you are right..yes i have set the images from the product categories..what i have to do to put them in the container and make them fill it?
Thank you
How did you add this container? HTML?
You can try use a background image CSS to add the image to the container, and set background-size to cover.
https://www.w3schools.com/cssref/pr_background-image.asp
If you are just trying to add a page hero to the category archive page, you can totally use the block element - page hero.
Here's the documentation with a tutorial video:
https://docs.generatepress.com/article/block-element-page-hero/
Hope it's helpful!
