XF 1.2 Auto Resize issue

[ineedhelp]

So I finally managed to install 1.2 beta 3 - I'm liking it and now able to reduce the number of installed add-ons with the new features included in 1.2.

Anyways... The header is broken on mobile devices such as on the iPhone. The logo displays but it's dropped down and because of this the text above the forum list isn't showing..... And there's 2 arrows which shouldn't be there.

How can I fix this? And is there a way to disable the responsive feature?

 

[AndyB]

To disable the Responsive feature:

Admin CP -> Appearance -> Style Properties -> Responsive Design -> Enable responsive design -> Uncheck

 

[CTXMedia]

Style Properties > Responsive Design > untick the Enable responsive design box?

[Edit: Ninja'd by @AndyB ]

 

[ineedhelp]

That's great, thanks.

Is there a user by user option? So each member can decide if they want it enabled or disabled?

Also if I do enable it can I correct the header issue? Without effecting the normal header size when responsive is disabled?

 

[CTXMedia]

That's great, thanks.

Is there a user by user option? So each member can decide if they want it enabled or disabled?

Also if I do enable it can I correct the header issue? Without effecting the normal header size when responsive is disabled?

There aren't any permissions for the responsive setting - it's on or off - but you can copy your style (as a child style) and enable it there, giving you effectively two versions of your style - the Parent [Master] (with responsive off) and the Child (with responsive on) - this way your users can select whichever style they'd prefer to use.

Creating it as a child also means it inherts any changes from the parent, so you don't need to maintain two separate styles.

Hope this (make sense) and helps.

I can't help with the header issue, sorry, as I don't have 1.2 installed anywhere yet.

Cheers,
Shaun

 

[AndyB]

Also if I do enable it can I correct the header issue? Without effecting the normal header size when responsive is disabled?

I suggest you enable Responsive and add this to your EXTRA.css template so your logo will resize automatically. Adjust the width as needed.

@media (max-width:@maxResponsiveNarrowWidth) {
  #logo img {
  width: 250px;
  }
}

 

[ineedhelp]

I suggest you enable Responsive and add this to your EXTRA.css template so your logo will resize automatically. Adjust the width as needed.

@media (max-width:@maxResponsiveNarrowWidth) {
  #logo img {
  width: 250px;
  }
}

The logo is actually fine, it's the header spacing above the logo which is too much, I need to reduce that.

www.barfilounge.com - if you go there, you'll be able to see what I mean. You may need to select BL Mobile from the style changer.

 

[AndyB]

The logo is actually fine, it's the header spacing above the logo which is too much, I need to reduce that.

I suspect the problem is you have a setting here that should be removed:

Admin CP -> Appearance -> Styles -> Default Style -> Style Property Groups -> Header and Navigation -> Height of Header Logo

 

[ineedhelp]

I suspect the problem is you have a setting here that should be removed:

Admin CP -> Appearance -> Styles -> Default Style -> Style Property Groups -> Header and Navigation -> Height of Header Logo

Tried that, no luck.

 

[AndyB]

What value did you place in Height of Header Logo field?

 

[ineedhelp]

What value did you place in Height of Header Logo field?

85px This is fine for the default style... But even when I alter it for the Child default style, it doesn't fix the problem.

 

[AndyB]

Your default style doesn't have responsive enabled. I suggest removing the other styles so you can concentrate on making the default style work with any computer or mobile device.

 

[ineedhelp]

Your default style doesn't have responsive enabled. I suggest removing the other styles so you can concentrate on making the default style work with any computer or mobile device.

Some members, including myself, don't like the responsive feature, I prefer browsing the full version even on my phone.

 

[AndyB]

When troubleshooting code issues, it's always easier if you simplify the environment. You can always create different styles once you get the default style working with the responsive design.

What's nice about the responsive design is that it's very close to the full version in look and feel, so those that prefer the full site on their mobile might very well like the responsive mode.

 

[Paul B]

My approach is to keep my existing fixed width style and create a new child style which is responsive.

That gives all visitors the option then.

 

[ineedhelp]

My approach is to keep my existing fixed width style and create a new child style which is responsive.

That gives all visitors the option then.

This is what I've done. if you check www.barfilounge.com - you'll notice that the header isn't in the right place (BL Mobile style)

Any ideas why that's happening?

 

[Paul B]

You have a hidden 300px div top right of the header area which is pushing it down.

 

[ineedhelp]

You have a hidden 300px div top right of the header area which is pushing it down.

Thanks, it's fixed the problem!