Responsive Design for XenForo 1.1 [Paid] [Deleted]

[Arty]

Hey Arty i just made these template edits and was wondering if there was any CSS magic i could use to revert this hack when your mod kicks in?

Add this to responsive_extra.css

.messageUserBlock div.avatarHolder span.img.l { {xen:property responsiveMessageAvatarHolderAvatar} }

Hi Arty,

I think I had this issue before, but couldn't find the fix in this thread.

How do I get the logo to align properly?. I think I had to add something to responsive extra.css?

It is caused by your logo. It is much wider than it should be with a lot of extra space on right side.

 

[Hlchia]

Will the add-on be updated to support the Showcase add-on?

 

[Anthony Parsons]

Will the add-on be updated to support the Showcase add-on?

To my knowledge, the add-on doesn't support anything other than wrap specific elements and make basic changes so that a person can make anything responsive / start with a basic responsive design. The add-on doesn't come close to working like this style, for example.

 

[Forsaken]

Arty is there any possibility of offering a different design pattern for the responsive navigation and sidebar?

Primarily off canvas (http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/#off-canvas) or similar.

 

[Arty]

Will the add-on be updated to support the Showcase add-on?

yes

Arty is there any possibility of offering a different design pattern for the responsive navigation and sidebar?

Primarily off canvas (http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/#off-canvas) or similar.

I'd love to do that, but this add-on must work with many different styles and work without JavaScript. That makes it impossible to add custom layout for menu. It is something that should be integrated separately with each style.

 

[Arty]

Arty updated Responsive Design with a new update entry:

Showcase support, adjustments for xenFracture, bug fixes

New version (1.1.2) of Responsive Design add-on for XenForo is available.

Changes:

• Support for Showcase add-on
• Adjustments for xenFracture style
• Bug fixes

Read the rest of this update entry...

 

[oman]

Hi Arty,

I think I had this issue before, but couldn't find the fix in this thread.

How do I get the logo to align properly?. I think I had to add something to responsive extra.css?

Realised that I had to align the logo left in the header settings. It was set to center.

 

[Dante_B]

My store isn't responding well with the responsive layout. Can this be fixed or is possible to disable the responsive layout just for this "page node"?

http://www.solecalifestyle.com/pages/store/

 

[Arty]

That store uses tables for layout and some inline styling instead of css, so it can't be fixed.

You can't disable it for one page. What you can do is set minimum width for container to prevent page from collapsing, but page elements will change for responsive design anyway. Add this to extra.css

body#ecwid_body { min-width: 960px !important; }

 

[Dante_B]

That store uses tables for layout and some inline styling instead of css, so it can't be fixed.

You can't disable it for one page. What you can do is set minimum width for container to prevent page from collapsing, but page elements will change for responsive design anyway. Add this to extra.css

body#ecwid_body { min-width: 960px !important; }

Thanks! I can work with this. However, the forum navigation overlaps my header. So when i click the forum navigation it will end up clicking the header link, directing me to the forum index.

 

[Arty]

I suggest to use different logo for mobile layout. You can set it in style properties -> responsive design: header.
Also you might need to increase navigation height. You can set it in style properties -> responsive design: navigation.

 

[MattW]

Arty, does anything need to be done to get this to work with the Showcase?

 

[Arty]

showcase_footer.html needs to be included on all showcase pages. There are too many css files, so I had to add code to footer template for that add-on instead.

 

[Arty]

This is strange. I see that it is included on your page, but css is included before showcase css files, causing default css to override responsive css.

Find and delete this code somewhere in showcase css files

.showcaseMain .showcaseItem {
    width: 33.3%;
}

It isn't needed because its duplicate of .showcaseItem and it causes problems.

 

[MattW]

This is strange. I see that it is included on your page, but css is included before showcase css files, causing default css to override responsive css.

Find and delete this code somewhere in showcase css files

.showcaseMain .showcaseItem {
    width: 33.3%;
}

It isn't needed because its duplicate of .showcaseItem and it causes problems.

Thanks Arty. I set 33.3% to slightly pad out the area by an extra 0.9% to make it symmetrical

 

[oman]

Hi Arty,

I have Shelley's secondary node icons added - http://xenforo.com/community/resources/node-secondary-images.1512/

Basically it causes the boundary to break out a bit on an iPhone, probably because of either the size or margin I'm using for it. Is there any way to disable this on responsive or set them to stop displaying at a certain width?

Thanks,
oman

 

[Arty]

Add this to extra.css

 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
    .node .nodeText { padding-left: 0; background-image: none !important; }
}

Change both 700px on first line to width that you prefer.

 

[Hoolio]

Hi Arty

Just a shot in the dark here.. I am configuring different ad sizes for different screen sizes and am struggling to be able to see google Adsense ads on a blackberry on its normal "mobile' view. It does work in the handsets desktop mode..

I found this article

http://productforums.google.com/forum/#!topic/adsense/PRMlA5y3Spk

 

[Arty]

This should help you: http://www.artodia.com/threads/responsive-design-width-issue.890/#post-4043
Most likely you need to wrap your ads code in

<div class="baseHtml"> ad code </div>

 

[realwx]

Is there an option to see, when viewing on a mobile phone, the latest topic and who posted under individual forums? Right now it hides it.

Great addon by the way!