Responsive Design for XenForo 1.1 [Paid] [Deleted]

[Arty]

Arty submitted a new resource:

Responsive Design (version 1.0) - responsive design, mobile style

This add-on adds responsive design to any XenForo style.

Responsive design means your forum will work on desktop and mobile browsers. Mobile version will have slightly different layout, allowing to fit all content on small mobile phone screens, but all major design elements will remain the same as on desktop.

You can enable/disable add-on per style. You can tweak responsive design elements using new style properties.

Important: this add-on requires Template Modification System add-on. You...

Read more about this resource...

 

[Andy.N]

Purchased.

 

[FabioCesar]

Purchased.

 

[Andy.N]

Ok, first question. I have flexile style which I set it at fixed width under Style properties->General->Pagewidth Controller
width: 992px; margin: auto;

and under Under Style properties->General->HTML-Settings
min-width: 1000px;

After I install this addon, the style becomes fluid width. Where do I have to change in Responsive properties so it respects the settings.

 

[Arty]

Its a bug. I didn't consider that style could have fixed width. Thanks for finding it.

Open master style's template "responsive_public.css", find this (starts at second line):

.pageWidth
{
    width: auto;
    min-width: 0;
    <xen:if is="@pageWidth.width > 0">
        max-width: @pageWidth.width; 
        margin: 0 auto;
        _width: @pageWidth.width;
    </xen:if>
}

@media only screen and (max-width: @responsiveWidth), only screen and (max-device-width: @responsiveWidth)
{
    .pageWidth
    {

and replace with this

<xen:if is="!@pageWidth.width">
.pageWidth
{
    width: auto;
    min-width: 0;
    margin: 0 auto;
}
</xen:if>

@media only screen and (max-width: @responsiveWidth), only screen and (max-device-width: @responsiveWidth)
{

    .pageWidth
    {
        <xen:if is="@pageWidth.width > 0">
            min-width: 0;
            width: auto;
        </xen:if>

 

[Arty]

I've found few more conflicts with Flexile style and fixed them.

Please download add-on again and use option to upgrade (or reinstall it). Only xml file was changed, no need to re-upload other files.

 

[Andy.N]

Uploaded the new xml and the style still becomes fluid.

 

[Arty]

Uploaded the new xml and the style still becomes fluid.

That's strange. Can you please post link to your forum (or send it via conversation), so I could check it?

 

[Shyuan]

This add-on is cool, I am buying it very soon! and it will be my first paid add-on

 

[craigiri]

Do I understand that this would convert my existing layouts - without affecting the look and feel of the style - to a responsive layout? What would happen, for instance, with fixed graphic ad banners?

All the other little tweaks I have made to the stock XF style will still be there?

 

[Andy.N]

I installed the first release and it works much better than I expected. I suspect that Arty will make some fixes and the future versions will be a whole lot better.
Fixed size graphic will stretch the width out so you would need to choose which element to show for phones. Use responsive_extra.css to customize it.

The xenporta works surprisingly well.

I already removed Russ mobile style

 

[Andy.N]

The tabs on the Widget Framework sidebar for the Most read/Most commented is not displayed correctly yet.

 

[Russ]

I already removed Russ mobile style

Hey -

Actually great job Arty... however question... how exactly would it handle an actual heavily customized site such as mine? In sig

 

[craigiri]

The same, I guess, goes for full size imagines either placed in (XF) or linked to? That is, will these graphics all make the layout stretch the width of everything?

 

[Arty]

how exactly would it handle an actual heavily customized site such as mine? In sig

It will require tweaks. Style has responsive_extra.css, which is similar to extra.css but rules added there will be used only in responsive layout.

Ads must be changed by forum owner because ad location and format is specific to each forum. xenPorta module isn't ready yet. Your navigation menu should work fine.

By the way, you have a bug on your forum. "What's new" menu item is wrapped in ul > div. It is missing li

 

[Russ]

It will require tweaks. Style has responsive_extra.css, which is similar to extra.css but rules added there will be used only in responsive layout.

Ads must be changed by forum owner because ad location and format is specific to each forum. xenPorta module isn't ready yet. Your navigation menu should work fine.

By the way, you have a bug on your forum. "What's new" menu item is wrapped in ul > div. It is missing li

Hmmm thanks, not sure how that got there

 

[Arty]

The same, I guess, goes for full size imagines either placed in (XF) or linked to? That is, will these graphics all make the layout stretch the width of everything?

That depends on location. Images in posts and logo should automatically scale down. If something doesn't scale correctly, its a bug and I'll fix it.

 

[Anthony Parsons]

Andy, you must remove the fixed width value and insert: max-width: 992px; into the extra field value. That fixes the width, yet won't impede responsiveness.

You cannot have a fixed width with responsive design, because you would need to use CSS table values to do it, which has there own issues. You must use max-width to fix your site, with margins 0 auto so it centers.

Arty... shouldn't that be dropping the side margins for the mobile media queries? Making full space of a mobile screen?

 

[Anthony Parsons]

For those not understanding true responsive design, you may need to add values to make your style correctly work.

For example, ems are the correct font value for responsive design, which should also be used in the padding. That way, the font and padding values correctly shift based on device being viewed. I say that, because whilst desktop browsers set the default font at 16px, and Xenforo reset has it at 13px, most mobile devices will actually show a much larger screen resolution than the actual resolution you view, and many devices use non-standard font sizes as the default, however; on that devices screen it will view correctly providing your style is using flexible values, not fixed. Kindle comes to mind... from memory about 24 or 25px is its browsers default value. There are lots of devices not using 16px which will screw with responsive design that isn't using such flexible values elsewhere.

People who buy this, IMHO, will still need to know quite a lot of CSS and basic HTML in order to apply this to your style.

 

[Anthony Parsons]

I can imagine you're going to be very busy with this one Arty... nice work.