[Resolved] Elements Header

Home Forums Support [Resolved] Elements Header

Home Forums Support Elements Header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1599250
    Dani

    Hi,

    I’ve a problem with the header view. I see the full image while my client view a cropped image.

    I create a Header Element and if I add padding, the image is cropped horizontally. But if I remove the padding and add Full Screen option, so the cutout is on the sides (cropped vertivally).

    My client wants see the full image, no cropping when switching screens, like this: http://www.obcocinas.es

    Can you help me?
    Thanks!
    (Enclosed private information)

    Dani
    https://about.me/aticbcn

    #1599300
    David
    Staff
    Customer Support

    Hi there,

    You will need to use % top and bottom padding in the header element to keep it both responsive and set its aspect ratio to your original image.

    Calculate your original image ratio ie. Width / Height * 100.
    In your example that is:

    2322 / 5129 * 100 - 45%

    Then split this value between your padding values ie. Top Padding; 23%, Bottom Padding 22%.

    Also remove the . from the Header Element and replace it with a HTML Comment eg. <!-- hero image --> This will remove the additional height the . adds to the hero

    #1599916
    Dani

    Ok, works fine.
    Thanks a lot for your explanation!
    Regards

    Dani
    https://about.me/aticbcn

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