How To: make Atahualpa more responsive/mobile friendly

Alan_OldStudent · #7 Dec 26, 2014, 01:20 AM

Hi Ken,

I tried to follow this suggestion.

Quote:

Originally Posted by kdawes01

Scalable Header Image...

To make your header image scaleable by browser width (viewport) you can try the following.
In the ATA "Header Image" area go to "Header Image: Height" set it to 0 (yes, zero!) and save.

Now go to "HTML/CSS Inserts" area and add the following to "CSS Inserts"

Code:

div#imagecontainer {
background-size:cover !important;
padding-top:23.9%;
}

The percentage to use for the padding value will depend on the aspect ratio of your header image. i.e. If your header image is 980x234 px then 234÷980= .234, so the height of the image is 23.4% of its width.

This works because css figures top and bottom padding percentages relative to the width of the containing block. Background images will display beneath a block's padding, so if the top padding equals the height of the background image, the whole image will be visible. Even though we set the height to zero, the padding still contributes to the height of the container.

My header images are 1210 x 200 px, and so I figured the aspect ratio of 16.53%. I set the height at 0, and then went to look for a good spot to add this code:

Code:

div#imagecontainer {
background-size:cover !important;
padding-top:16.53%;
}

At first, I went to ATO>Various Content Items>add HTML/CSS inserts. That didn't work, and so I went looking for other places, but really, they only affect overlay. Please let me know where I should add this.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra