Scaling header image on moble / iPhone

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

Tagged: 

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

    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!

    #968
    Livemeshlivemesh
    Keymaster

    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; }
    }
    
    #969
    Livemeshlivemesh
    Keymaster

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.