Archived topic
Responsive header
7 replies · Started by Viktor on November 29, 2018
I use the header to display my photographs
https://www.phototraces.com/deconstructing-photo/lower-south-desert-outlook-utah/
but it is not responsive.
What can I do to make sure it stays responsive. Btw, I disabled the header for small devices.
Hi there,
if you want to maintain aspect ratio then use % for the padding. You can also set the padding separately for mobile.
Personally i use one setting for all by dividing the original image height by its width and use the % ratio as the total top/bottom padding.
Dave,
thanks, I can see it works, but can not figure out the calculations.
If my header image is 1400 x 700, how do I calculate out exact percentage?
Like so = 700(h) / 1400(w) = 0.5 (50%).
You can add 25% to both top and bottom padding or 50% to just one of them.
If you have content in the header element then that changes matters and will require less padding, and is a little trial and error.
It only works if I use Container: Full Width option and not Contained option.
It looks if it calculates the heights percentage based on total page width and not based on the Page Hero container width.
Aah yes, my bad - the assumption is that the aperture is 100%. In that instance then the width will be based on the width of the container.
does it mean I am out of luck if I use Contained option?
It shouldn't be. The ratio should still work. You should try making sure that the original image size has the same width as your container.
