1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 header image height in responsive design

Discussion in 'Styling and Customization Questions' started by flynnibus, Aug 5, 2013.

  1. flynnibus

    flynnibus Member

    I have a relatively wide image in my header logo. It requires a height of 155px to be displayed correctly above the menus when viewing in a full browser, and the header image logo and height of header logo style properties are defined as such.

    in v1.2 with responsive enabled, the logo is automatically scaled to fit within the width of the browser... excellent. But the 'height of header logo' setting is not.. so when I view this a narrow client like an iPhone... I get a huge blank area around my shrunken logo image.

    How can I make it so the height of the logo value scales along with the scaling of the width of the image?
     
  2. AndyB

    AndyB Well-Known Member

    I had the same problem. What I did was remove the header altogether in responsive mode. Well not exactly altogether, a little space is needed for the Inbox and Alerts red notices.

    This is what I added to my EXTRA.css template:

    Code:
    /*****************************************************************/
    /* logoBlock  */
    /*****************************************************************/
    
    @media (max-width:@maxResponsiveWideWidth) {
      .Responsive #logoBlock {
      display: none;
      }
       
      .Responsive #headerMover #headerProxy {
      height: {xen:calc '@headerTabHeight * 2 + 17'}px;
      }
       
      .Responsive #navigation {
      padding-top: 15px;
      }
    }
    
     
  3. flynnibus

    flynnibus Member

    hrm... maybe this could be used to force specific heights at certain wide/narrow/etc ? or maybe just switching the image would be nice (which is what the responsive add-on did). I do want a logo on the mobile site
     
  4. mistypants

    mistypants Well-Known Member

Share This Page