[Resolved] Elements Header

[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)

[David]

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

[Dani]

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

[David]

You’re welcome

[Author]

Posts