Responsive Design for XenForo 1.1 [Paid] [Deleted]

[Andy.N]

What are the sites that are using this add-on? I'd like to see how XF looks on mobile with this add-on.

Here is my site for demo
Here are few pages with tables
One, two, three

Andy, are you using an actual table, or have you done a CSS table. If CSS table, as Arty eluded, that can be easily made completely compatible. An actual table... a lot harder. A CSS table you simply change the table CSS into an @media action, then define differently at lower resolutions.

What you can do with an actual old table, you can do now with CSS table properties.

Here is a table that has been made responsive using Arty's tip on post #51

The tables using Bbcode are not easy to fix and may not worth the time.

 

[Anthony Parsons]

Andy, did you structure that so it only has one trigger point? That is all that shows is all... when minimising. A single trigger between full size or mobile, thus one still gets a sideways scrollbar on resolutions after the trigger, yet before max width.

 

[Robyn Unc Privette]

How can I fix this? The style is Flexile Dark.

 

[Arty]

Edit these style properties in "Responsive design: header" section:

Logo Block: in extra field add "float: none;"
Logo Image: in extra field add "max-width: 100%;"

 

[Arty]

Also add this to responsive_extra.css to hide ads below posts because those ads are too wide

.underPost { display: none; }

 

[Robyn Unc Privette]

Love it! Thank you! Yet another wonderful product.

 

[Kintaro]

purchased!

first two questions!

1. how to make it resize automatically the logo?
2. how to, instead of hiding, display different ads for mobile?

 

[Arty]

Thanks

1. See 3 posts above
2. http://xenforo.com/community/threads/responsive-design-paid.39994/page-3#post-438686

 

[Kintaro]

If width is controlled in javascript, such as adsense, then it can be easily done. For example:

if ($(window).width() > 800)
{
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
}
else
{
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
}

uhmmm do you think that Adsense will accept this?
I think that can be more safe to use a Xenforo conditional to not modify the adsense code.

 

[Arty]

You can't use conditionals because browser width cannot be checked on server side. It must be checked on client side.

 

[scottglax]

Meant to post this the other day....purchased and installed this add on over the weekend and it's awesome and worth every penny. Still haven't had time to modify the mobile CSS but I can tell folks this add on is fantastic.

Edit to add: how do you leave a review?

 

[Kintaro]

You can't use conditionals because browser width cannot be checked on server side. It must be checked on client side.

maybe we can check it by javascript and pass that information in some way to xenforo code? mission impossible?

 

[Kintaro]

Can be possibile to have an option that can enable search form next to the navigation menu? or maybe a second toggle for quick links? In this way we have the navigation menu for NavTab links and next to it Quick Links toggle.

How can I move the sidebar toggle to the top next to the "navigation menu"?

...an idea for a possible top multi toggle buttons/menus:

Menu | Quick Links* | SideBar | Search​

​

I think they can fit to the average smartphone resolution.​

*Maybe Quick Links can be shortned.​

How to resize the embedded video? for example, embedded youtube video don't get resized like images. Result similar to this: View attachment 36461

Images are resized on the fly, but the resize process is slower than the page rendering of the browser (at least in my case) and that leave the page stretched like when the images were not resized. Same result like above: View attachment 36461

Some user ask me to totally disable the responsive layout. I have do duplicate the default style and point them to it? In the duplicate I'll disable responsive off course.

 

[Arty]

maybe we can check it by javascript and pass that information in some way to xenforo code? mission impossible?

Its not that simple

There is a search link in navigation menu.

Moving menu: that requires JavaScript to move menu. Forum supposed to work without JS as well, maintaining 2 separate ways to display menu items will require way too much additional work and might result in more code conflicts with different styles.

Same for sidebar. Its possible, but requires way too much work and can cause conflicts.

Image resizing is handled by XenForo's script, not this add-on.

 

[Sheldon]

Purchased.

Awesome.

Thank you.

 

[oman]

Purchased this. Hope to start using it shortly.

 

[oman]

Installed, and everything seems to be all over the place

How can I fix it?

 

[Arty]

You need to hide ad blocks in responsive layout. Add this to responsive_extra.css

.mainContent > center { display: none; }

you have also forgot to set units for responsive logo. "85" and "85px" are not the same

 

[oman]

Okay, did those two things. I just need to know how to disable the gfn social tabs on responsive.

 

[oman]

You need to hide ad blocks in responsive layout. Add this to responsive_extra.css

.mainContent > center { display: none; }

you have also forgot to set units for responsive logo. "85" and "85px" are not the same

Just realised that the ads didn't disable themselves, because I'm using bd rotating ads, and digital point ad positioning.