Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Page Header – Fixed Size

Home Forums Support Page Header – Fixed Size

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #506765
    Rodolfo

    Hi,

    All my feature images have same width (1100 px) and height (220 px).

    How can I set my Page Header, to show entire image, using “Merge with site header”?

    I tried to adjust padding to 110px (110+110 = 220 exact height)… but image is still croped.

    I notice, that if I use a lower value (90px for example), it show better, but I would like to have my feature images with 1100 x 220px, the same size of images.

    Is there a way to do that?

    GeneratePress 2.0.2
    #507108
    Leo
    Staff
    Customer Support

    Hi there,

    What if you just add the image as static image using <img> tag instead of adding it as background image?

    Let me know.

    #507146
    Rodolfo

    Hum…. I can’t imagine how to implement this…

    1 – It is a featured image, so, I don’t know where to find tag.

    2 – How can I do it, and have same effect “Merge with site header”?

    Is there a way to do it, without “Page Headers”?

    #507397
    Leo
    Staff
    Customer Support

    I meant like adding this as page header content:
    <img src="http://www.computar.com.br/wp-content/uploads/2017/10/Computar-Sistemas.jpg" alt="" />

    #509909
    Rodolfo

    Leo, sorry I’m late about this replay….

    It will not working… because I use the same Page Header, to all pages … and each page has a different featured image…

    If I understood you right, this way will show always computar-sistemas.jpg , right?

    #510126
    Leo
    Staff
    Customer Support

    Ok just so I understand. This is what I see currently: http://www.screencast.com/t/DmszkvbY

    You are wanting exact same layout but just 20px shorter?

    #511900
    Rodolfo

    Hi Leo…

    I would like to show entire image… 100% without cut left and right margins… …

    Take a look:

    2018-03-05_10-08-08.jpg

    Above is my Page Header configuration and how page looks like… Below, is original image… Note the “red lines”… it is where image is cut off…

    #512159
    Leo
    Staff
    Customer Support

    Try this CSS:

    .generate-content-header {
        background-size: 100%;
    }
    #512184
    Rodolfo

    Perfect! … thank you again, Leo…

    IN addition: I replace 90 to 80px (Top/Bottom padding) to be perfect!

    😉

    #512361
    Leo
    Staff
    Customer Support
    #512796
    Rodolfo

    Hi again Leo…

    Just a additional information…
    I have to use min-witdh=1100px to make it works right.
    So, If is a mobile, if we use 100%, a grey area appers below the image…

    @media (min-width: 1100px)
    {
    	.generate-content-header {
        background-size: 100%; }
    }

    That’s all! Bye!

    #513408
    Leo
    Staff
    Customer Support

    Ahh yeah right.

    Here are the our standard breakpoints if you are interested: https://docs.generatepress.com/article/responsive-display/

    #514312
    Rodolfo

    Ok Leo… I use this standard, but in this case, if witdh is less than 1100, this css (100% image that means 1100px) should not be applied.

    It is ok…

    And thank you for share this information…

    #514347
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.