Changing template width in layout to 900px breaks layout

Hi

I am trying to change the template width from default 1240px to 900px. I am also reducing the tablet and mobile widths to smaller values but it ruins the style. The header links at the position: header_right moves to top of screen (as displayed in attached pic) overlaying the menu bar, But as soon as I move the width of browser to approx more than 1240px then the display corrects itself. The problem appears to be when the width of screen is between 900 and 1240px.

Thanks for your help.

Reducing mobile and tablet sizes isn't the greatest idea as they are originally set to work on corresponding devices. If you will reduce mobile width, it will change media query and the mobile layout will not show on mobile devices.
As it goes to "desktop" version - University has a lot of information to show and reducing it under 1024px would require a lot of layout modifications. Bare in mind, that currently really small amount of users has screens with width lower than 1300px.

Hi

Thanks for the quick reply.

The resolution of my desktop screen is 1280x1080, and since I don't open explorer in full screen mode (approx open at width 900-1000px) I get the tablet view of the university template. Now I can assume that there may be quite a number of people who use internet explorer in the same way, meaning I don't want to limit the users experience because of there viewing preference.

Also the live demo for this template (http://demo.gavick.com/joomla25/university/) seems to run the full template width even with browser width at approx 1040px. Can you please send me the settings required to get it running at this width. I tried changing the settings to 1040 in layout menu but they don't seem to work (giving the same error as in above pic).

Many thanks.

Please try quickstart package - it contains all settings that are used on demo site and is a quite good way to start.

Hi

After investigation I have realised the above issue appears only when using firefox on windows 7 when using the website from my web server (icanswipe.com/test/outreach)

Below is my findings using fresh installations of the quickstart joomla v2.5 and joomla 3. All cases work perfectly apart from (2.2).

1) On Mac OSX 10.8.5
1.1) On localhost (using xampp) with safari and firefox the website moved from tablet mode into full template mode at 1040px (as expected)
1.2) Connecting to my webserver (icanswipe.com/test/outreach (for joomla 3.0) and icanswipe.com/test/outreach25 (for joomla 2.5) with safari and firefox the website moved from tablet mode into full template mode at 1040px (as expected)

2) on Windows 7
2.1) On localhost (using xampp) with internet explorer and firefox the website moved from tablet mode into full template mode at 1040px (as expected)
2.2) Connecting to my webserver with internet explorer the website moved from tablet mode into full template mode at 1040px (as expected), BUT on firefox it moved into tablet mode at 1240px.

As the live demo also works on all OS's on all browsers without a problem (same as in xampp) it appears there seems to be some setting on my server's end and it affects behaviour on firefox on windows7 only.

I am not sure if you have seen such behaviour before but if so can you please recommend any tips.

Many thanks for all your help.

Could you please post an url to your site?

Hi

Here is the link to the joomla 2.5 installation. Its a fresh install with no modifications.

http://icanswipe.com/test/outreach25/

Does it show same behave?

Yes it shows the same behaviour as explained above. Just tested again on windows 7 using firefox. It works fine in internet explorer.

Is there a chance you could test it on any other computer running Windows7? CSS Media Queries that are used to create layout breaking points are server independent and only thing that comes to my mind is that in Firefox not all css files loads correctly. Also no one have ever reported us such a problem, so perhaps it is some custom settings of your browser? Maybe you could also try firefox in private mode to check if this brings anything new to the table.