XF 1.2 header image height in responsive design

[flynnibus]

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?

 

[AndyB]

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:

/*****************************************************************/
/* logoBlock  */
/*****************************************************************/

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

 

[flynnibus]

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

 

[mistypants]

This should address your needs: http://xenforo.com/community/resources/respollo.2016/