Scaling header image on moble / iPhone

Support Forums for LiveMesh Themes & Plugins Forums Squash Theme Support Scaling header image on moble / iPhone


Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #958

    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.

    Thank you!


    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; }

    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 –

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Squash Theme Support’ is closed to new topics and replies.