Responsive Design for XenForo 1.1 [Paid] [Deleted]

[Adam Howard]

Style works differently. Add-on messes with margin/padding for header block + absolute positioning of some elements in order to show menu, which is far from optimal. Style swaps header and content blocks, so content flow is natural and there is no need to use css tricks. Unfortunately same can't be done with add-on because header code is different for different styles, so it would cause a lot of conflicts with third party styles.

OK, so the style is the more complete package vs the add-on. Got it.

Ironical that the add-on works for me and the style is giving trouble (not your fault, just a little funny).

 

[Eric Russell]

I thought I read in here that ads don't work properly with Responsive Design? Does this include image banners?

 

[Arty]

They have to be adjusted. All ad providers use fixed width ads in iframe, which can't be scaled down dynamically. Solution is to display different set of ads for desktop and mobile devices by showing/hiding different divs that contain different ads.

For ads where you can set width, like adsense, you can use javascript to figure out browser window width and show different ads that way. Like this: http://xenforo.com/community/threads/responsive-design-paid.39994/page-3#post-438686

 

[Dante_B]

Arty, my mods and I are still having issues with my header bar.

We can click the Admin control panel link but no way of clicking my profile, inbox, or even logout. Can i just disable the Admin cp, mod queue and reported items? or do u have a better solution?

 

[Arty]

Background issue is caused by background image. It is designed to handle only 1 row of data, so it can't work on small resolution.

Try adding this to responsive_extra.css to fix some of those issues:

.publicTabs > div { float: none; margin: 0; padding: 0; }
#header_bar { height: auto; }

I can't see moderator bar, so I can't test that problem. My login is Arty, if you promote me to moderator I could check it.

 

[Ian Eberle]

I just bought your plugin and I must say that it's magical that you can essentially do a one-click conversion to a responsive design. You should consider making a similar add-on for the WordPress community. You would be guaranteed tons of sales at only $30.

Anyway, I have installed your add-on and my theme is having just a couple of problems.

The header has some issues with the background images and things (first picture below) and the navigation menu button also is placed oddly (first picture below). Also, when I view a thread, there's a green area to the right of the web page and it doesn't take up the whole screen (second picture below). I have installed an add-on that enables my sidebar on all pages, so that may be the problem. You'd have to compare the responsive site with the full desktop site.

I appreciate your help with everything! My forum is http://www.aquaticforums.net/forums/. The homepage (http://www.aquaticforums.net/) is built on a responsive Genesis design for WordPress and the header and everything works fine.

 

[Sheldon]

I just bought your plugin and I must say that it's magical that you can essentially do a one-click conversion to a responsive design. You should consider making a similar add-on for the WordPress community. You would be guaranteed tons of sales at only $30.

Anyway, I have installed your add-on and my theme is having just a couple of problems.

The header has some issues with the background images and things (first picture below) and the navigation menu button also is placed oddly (first picture below). Also, when I view a thread, there's a green area to the right of the web page and it doesn't take up the whole screen (second picture below). I have installed an add-on that enables my sidebar on all pages, so that may be the problem. You'd have to compare the responsive site with the full desktop site.

I appreciate your help with everything! My forum is http://www.aquaticforums.net/forums/. The homepage (http://www.aquaticforums.net/) is built on a responsive Genesis design for WordPress and the header and everything works fine.

View attachment 38907 View attachment 38908

First image I came up with this:

/*Mobile CSS*/
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
 
#responsiveNavigation {
    padding-top: 32px;
}
 
.navTabsContainer {
    background-image: none !important;
}
 
.nodeList .categoryStrip {
    margin-top: 28px !important;
}
}

I am sure Arty would have a much better non-hackish way. haha.

 

[Ian Eberle]

I don't mind hackish code as long as it does the job

Where do I put that CSS? I'll try it out.

 

[Sheldon]

I don't mind hackish code as long as it does the job

Where do I put that CSS? I'll try it out.

Extra CSS

 

[Ian Eberle]

That helped with some things, but there are still some issues.

Issue #1:
When I view threads, there's still that green area to the right.



Issue #2: When I view forums, the navigation button still doesn't behave properly.



Thank you for everyone's help! I know nothing about CSS which is why I bought this add-on to begin with

 

[Sheldon]

/*Mobile CSS*/
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
#responsiveNavigation { padding-top: 32px; }
.navTabsContainer { background-image: none !important; }
.nodeList .categoryStrip { margin-top: 28px !important; }
.titleBar h1 { padding-top:12px !important; }
.breadcrumb .jumpMenuTrigger {display: none !important; }
}

Could replace what you had with that... fixes your title bar, except when you go inside the thread... hmmm.

 

[Sheldon]

Make sure you grab the one that has the jump menu trigger in it too...

 

[Ian Eberle]

Yes, now issue #2 has been fixed, but issue #1 is still causing problems.

I have an add-on installed to show the sidebar on every page (including in threads)... Could this be the problem?

 

[Sheldon]

Yes, now issue #2 has been fixed, but issue #1 is still causing problems.

I have an add-on installed to show the sidebar on every page (including in threads)... Could this be the problem?

Try disabling the add-on, see what it does.

 

[Ian Eberle]

I tried disabling it and it still had the same green thing.

 

[Sheldon]

Hmmm... alright, lemme take a look.

 

[Ian Eberle]

Thanks!

 

[Arty]

Sorry for delay.

Issue #1 is caused by adsense. It is wrapped in <div align="center">, change it to <div align="center" class="responsiveHide">

Another issue I can see is selected menu item has wrong background. Add this to responsive_extra.css:

.navTabs .navTab.selected .navLink span { background: transparent none !important; padding: 0 !important; }

 

[Ian Eberle]

That worked! Thanks for all your help

 

[franziska]

Hi Guys,

New to XenForo so need a little help, I have just purchased the responsive template / installed no problems but how do I

configure so that

- if some one come to my website then they should get the default -XenForo template
- If they come via a mobile device then it goes to one of the responsive templates

Some help here would be appreciated

thanks