[Resolved] Page Hero Element size

Home Forums Support Page Hero Element size

This topic contains 8 replies, has 2 voices, and was last updated by  David 5 days, 2 hours ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #779039

    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

    GeneratePress 2.2.1
    GP Premium 1.7.7
    #779047

    David Customer Support

    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.

    #779063

    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

    #779081

    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

    #779100

    David Customer Support

    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.

    #779267

    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

    #779273

    David Customer Support

    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.

    #779433

    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.

    #779460

    David Customer Support

    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;
    }
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.