[Resolved] Page Hero Element size

[Iban]

I’m trying to keep the aspect ratio of the Page Hero without luck

I used the code in the documentation and other css tricks but nothing seem to work:

.page-hero {
min-height: calc(100vh – 200px); /*Modify the 200px to the height of your header*/
}

I want a 50% of the width so i used 50vw but nothing i do keep the aspect ratio and all looks too much big

[David]

Hi there,

can you share a link to the site so we can advise, you can edit your original topic and use the Site URL field for privacy.

[Iban]

I done an image with the aspect ratio defined and i was really confused about what is 50% of the width because its actually more than a full page in desktop

The “dance” of size was about margin and padding pixels…

I think that im going to need to use half of the height instead the width

[Iban]

Nope…

If i choose to use vw, it looks very small in mobile and too much big in desktop

If i try with vh, it doesnt mantain the aspect ratio

Im confused and this not anymore a problem about GeneratePress but CSS

[David]

So what i generally work to is, calculate the aspect ratio of the image eg. 1080px (H) / 1920px (W) = 56%.
I then apply that as padding to the image in the Header Element e.g Top padding: 28% and Bottom Padding: 28%. This will maintain the aspect ratio of the image.
Then on the padding options for mobile responsive where you can adjust them for a different ratio.

The only time that this requires tweaking is when there is content with the Page Hero as this gets added to the padding and effects the height of the image.

[Iban]

I found another solution.

I wanted to show the post featured images equally in each screen size and without overflow them. So having in count that there exists 4:1 aspect ratio screens using Page Heros for showing them could be a waste of memory. So i will use them for showing site branding only.

Using 1:1 post images is the way to go if you want to show them the bigger possible in whatever aspect ratio.

.featured-image img {
max-width: calc(100vmin – 80px);
}

Now images are full shown in screen for whatever aspect ratio and i dont need to worry about losing image information of my featured images…

For the Page Hero i used thinner padding and now do properly it pourpose of showing page titles without full the entire view

[David]

Its always good if you can design your images to suit the container they are being displayed in and this is a great way to do it. Glad you got it resolved and thank you for sharing your solution.

[Iban]

I decided to use the same featured image as background (plus color) and the site will look different in each page but loading faster than using a branding pic.

The css was wrong, the final CSS is:

.featured-image img {
max-height: calc(100vmin – 80px);
width: auto;
}
/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles here */
.featured-image img {
max-width: calc(100vmin – 80px);
height: auto;
}
}

I bet there is a better way to do it but im not that good in css. I think that using this whatever pic size will look as big as possible in whatever screen ratio.

[David]

For 1:1 images ( as opposed to background images like those in the header ) you should just be able to just the image auto resize to its container. And just limit is max size with a max-width property e,g

.featured-image img {
    max-width: 500px;
}

[Author]

Posts