Responsive Design for XenForo 1.1 [Paid] [Deleted]

[Arty]

Looks like template modification was applied twice. Go to admin control panel -> styles -> template modifications, check counter for "navigation - Add menu button" template modification. If it is applied more than once, click Rebuild Templates button.

 

[RobParker]

Purchased to test out

How does this handle Adsense? Currently we have a separate mobile theme so its not an issue but we'd need some way to control whether to display full or mobile ads.

 

[Arty]

You need to configure your ad code to display different ads for different resolutions.

You can modify Adsense code like this:

if ($(window).width() > 700)
{
  ad_format = 'full size';
}
else
{
  ad_format = 'small ads';
}

(I don't remember exact variable names, see your adsense code)

 

[RobParker]

Do you mean the window/width syntax? Can I just add my Adsense code between the sets of {}s?

 

[Arty]

Yes. If you are having trouble setting it up, post Adsense code snippets for different ad versions and I'll help you adjust JavaScript.

 

[RobParker]

Thanks, I'll probably give it a go at the weekend and get back to you.

 

[DRE]

Today I bought Responsive Design due to the upcoming Facebook App.

How do I get my postbit to adjust automatically? From Desktop:

 

[DRE]

From iPhone:

 

[Arty]

All styles use margin for spacing on left of post content, that style uses padding instead. To fix it add this to responsive_extra.css

.message .messageInfo { padding-left: 10px !important; }

 

[DRE]

Thanks! Looks good on desktop now.

Any idea why its still kinda short width?

 

[Arty]

Are you experiencing same issue when you aren't logged in? I don't see that issue on your forum, so my guess is it is ether caused by menu that appears only to registered users or by moderator bar.

 

[DRE]

When logged in, so it's probably the moderator bar. Thanks! I'll figure it out later.

 

[DRE]

I disabled my 8thos Bar modification and removed everything from EXTRA.css out of curiosity and nothing has changed. Which probably means it's either my parent theme that's messed up or it's another modification interfering.

 

[Arty]

Inspect elements of moderator bar in desktop mode, see which one has white-space:nowrap and add rule for it with white-space:normal to responsive_extra.css

Or just this rule to responsive_extra.css and hope it matches item that's causing problem:

#moderatorBar, #moderatorBar div { white-space: normal !important; }

 

[DRE]

Process of elimination has chosen DC Smiley Manager as the culprit.

 

[DRE]

It's in dc_smileymanger.css

Changing the width effects the whole postbit.

.dc_smileymanager_stickContainer a {
    display: block;
    margin: -1px auto 0 auto;
    border: 1px solid #ccc;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 5px 0 2px 0;
    width: 200px;
    font-size: 11px;
    color: #666;
    outline: 0;
}

 

[DRE]

Even though disabling DC Smiley Manager fixes the postbit width, TinyMCE is still very very small, so that's telling me that there's something else going on.

 

[Arty]

TinyMCE isn't supposed to be shown on mobile phones unless you have installed TinyMCE Fix add-on. It will cause that width problem.

See this post: http://xenforo.com/community/threads/responsive-design-paid.39994/page-15#post-467883

 

[DRE]

Oh yeah the full TinyMCE editor was showing.

 

[DRE]

I also have MarkitUp Xenforo Integration.

Anyway I've re-enabled all addons and created a new skin that is just the default xenforo installation and the editor is fine.

The editor is not fine in my other skins though so that's telling me it is a style issue with either one of my styles or custom TMS edits.