We would like to increase the width of the template to 1200px, so zen-container to 1200px.

We have done this via theme-magic and width is updating fine.

Our issue is that the responsive-ness of the template from 1200 to around 940px is introducing a horizontal scroll bar as the browser window in reduced in size. It then works fine with smaller widths and the containers are fluid.

We have aplied this to inspire, grid3 and zenhost and produce the same result, with a standard T3 Blank template it works fine. We are testing on a local server so cannot give a link. Using J3.0.3 with basic content and T3 1.2.1.

Advice on how to correct this would be appreciated. Thanks

Hi

It sounds like a media query issue - ideally we would like to see a link - is it possible to move from local?

Cheers
Paul

Thanks Paul

Tracked it down I think to layout.less

Template file is:
.zen-container {width: @basewidth;margin:0 auto}

By adding max-width this removes the scroll bar - may of course have knock on effect else - what do you think?
.zen-container {max-width: @basewidth;margin:0 auto}

As template ships with base width 980px this would make sense given the break is 940px. Are we on the right track with this? Do you think we could work around this in a better way with T3 and JB?

At the moment I am just testing locally so do not have it on our testing server. Your thoughts on the above hack would be welcome.
Thanks Ian

Hi Paul

I realise not giving you a remote site to see is not ideal so I have reproduced an example using firebug and JB demo site. Altering the zen container width to 1200px produces the issue I explained earlier. This effectively shows the issue without access to the admin panel of the demo site.

You will see the main container is pushed right out of the container which then introduces the scroll bar. I have attached a screen grab of the issue via the JB demo online.

You should then be able to reproduce the effect on any JB2013 T3 templete by putting in template width of 1200px. You can then view on your copy locally or on a live/remote server to get a better idea. Our hack above seems to correct this but another opinion would be great. The code can be either put in custom.css or hard coded into the less file.

I hope this helps explain a little more the issue.

Thanks Ian

An update:

On Grid3 - I needed to apply max-width to grid3.less for #wrapper )not zen-container.

On Zenhost it was applied fine to zen-container.

Is this the best approach or I am missing something - thanks

Hi

I will look into this, but I have one comment. I will soon add page with info about t3 template versions and t3 framework version they support.

As I am not sure or better say I don't think that we did release Grid3 that will work correctly with T3 1.2.1....it might look ok, but try mobile menus...there is so far big difference between T3 1.2.0 and 1.2.1

I have quickly tried with T3 v.1.1.0, 1.2.0 and 1.2.1 and can reproduce the issue as described. This is not extensive testing so there might be other issues!

Mobile menu appears as expected on screen and emulation.

I await your further suggestions.

Some documentation with guidance on versions would be useful.

Thanks Ian

Hi

seems you are right. This means I will go and test each template as due to different layouts it won't have universal solution.

As for version guidance. Right now latest Grid3 and Inspire template packages do have inside template setting information about supported T3 Framework version.

Thanks for the update:

Most of the tmeplate state T3 v1.1+ which I assume means they "should " work with 1.2.0/1.2.1+ in most cases. I realise 1.0.0 was different though.

A side issue whilst you are checking templates. In Grid3 the module position "background" is not included in the templateDetails.xml - not sure if this intended or just got missed but thought I would mention it.

Thanks Ian