Post hero image in the Mobile view

Hi there,

are all your featured images the same aspect ratio ?

Hello,

Most are of the same aspect ratio. Is there a way to solve the issue?

Hello,

I have added the website URL in the private box to check it.

You're not seeing all of the image on desktop either as it too has the Post meta and title in front of it.
Do you want 100% of the image to be visible on all devices and therefore no title/meta ovelay ?

Yes, I want 100% of the image to be visible BUT ONLY the mobile & tablet devices and that too with title/meta overlay?

Please read twice what I'm saying above.

Hi Dev,

There are two ways to assure perfect aspect-ratio for the featured images in the header section you created.

The first way is to set the background-size to “contain”, and correspondingly add appropriate top-paddings for different media sizes.

Here’s a CSS you may try to do just that:

@media (max-width: 1024px) {
    .gb-container.gb-container-f6eb8151:before {
    background-size:contain;
    background-position:top;
    background-repeat:no-repeat;
    }
    .gb-container.gb-container-f6eb8151 > .gb-inside-container {
		padding-top: 200px;
	}
}

@media (max-width: 768px) {
    .gb-container.gb-container-f6eb8151 > .gb-inside-container {
		padding-top: 213px;
	}
}

Kindly replace the top-padding value to what you think is most appropriate.

Here is an article on how to add custom CSS: https://docs.generatepress.com/article/adding-css/

The downside to this is whenever you upload a different sized image, the static padding might not work to make the image appear completely, or it may produce unnecessary whitespace. Different sized devices would also need different top-paddings.

See this as reference: https://share.getcloudapp.com/o0uZ7xAr

The other way to approach this is by modifying your elements. Specifically, you’ll need to add a dynamic image, and make the featured image appear there instead of making it appear in the background.

See this for reference on what I mean: https://share.getcloudapp.com/yAuk04EE

Through an image element, we can assure that the aspect-ratio of the element will be followed all the time.

Correspondingly, you would need to set the position of the parent container holding all elements to relative, and accordingly set the position of the container which holds the title and the meta data to absolute, and its z-index to something high for Desktop and Tablet probably.

Hope either of these works for you! If you prefer the second approach, kindly add a dynamic image as indicated, and we’ll see what CSS we can provide to correspondingly implement this.