Scaling header image on moble / iPhone

[skeltonmedia]

How come the image gets squeezed when changing devices? I’d like the header image to be viewed to scale on every device. Is this possible? Also the date buttons appear to not change colors although I had applied the css in the custom box.

lukezachrichmma.com

Thank you!

[livemesh]

When I think about it now, the “background” image actually needs to be a foreground image with text floating on it so that header size gets adjusted as you reduce the window size.

You can overcome the current problem by having this custom code in custom css panel to vary the height of the header as the window reduces the size –

@media only screen and (max-width: 767px) { 
    #title-area { padding: 65px 0; }
}
@media only screen and (max-width: 479px) { 
    #title-area { padding: 35px 0; }
#title-area h2 { font-size: 18px; line-height: 28px; }
}

[livemesh]

Well, there is an easy way out of both of your issues – header size and hiding the title (previous query). Just do the following for a page or a post –

https://docs.google.com/file/d/0B9j6FQo4cSQFUzl3bnNCOG1wbjg/edit?usp=drivesdk

The header image will reduce gracefully depending on available width and no title will be required.

As I suggested earlier, due to the image being foreground, header truncation does not occur. If you want title text, you can apply by absolutely positioning it inside this image.

[Author]

Posts