Joomla Templates Club 406,261 posts

[guyarbel Friend guyarbelJoin date: March 2014Posts: 2Downloads:0Uploads:0 Thanks: 2]

#196106

Hello guys
I’m building my site step by step, and i don’t have enough experience in coding, but i can follow your instructions easily.. as i did when i read lots of tips on other issues.. I searched for this issue in the forums and I couldn’t find anything..

I want my site to spread fixel’s grid also over 24″ / 22″ screens, 1680px / 1480px.
I’ve figured that if I adjust the “Wide Layout Width” in Fixel Template > Theme Magic > (in my case) > Grid:
Wide Layout Width was by default 1200px and i’ve changed it to 1680px
Normal Layout Width was by default 940px and i’ve changed it to 1200px

Well, the problem is that after changing it to 1680px it opened nicely on my 24″, but when i’m browsing again in my 1280px screen, it recognize it as the “Wide Layout Width” and therefore a horizontal scoller appear and the grid goes “out” of the screen to the right. 😮
If i change back to 1200px and 940px, i will have a big black area on the wide screen…

My question is :confused: – what do i have to do to make this template “more responsive”… i mean – to add a wider screen resolution that will spread the grid over it on 22″ / 24” screens and the normal screens.

Thanks!

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#528293

Please try to open the file: /templates/your_template_name/less/variables.less, then find and replace this code:

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 20px;
@gridColumnWidth: floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@T3gridWidth1200: 1208px; // T3 add
@gridGutterWidth1200: 20px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980: 940px; // T3 add
@gridGutterWidth980: 20px;
@gridColumnWidth980: floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add
@gridGutterWidth768: 20px;
@gridColumnWidth768: floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);

// T3 Extensed: 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

With:

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------
@T3gridWidth: 940px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 20px;
@gridColumnWidth: floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

//1480px-1680px
@T3gridWidth1480: 1480px; // T3 add
@gridGutterWidth1480: 20px;
@gridColumnWidth1480: floor((@T3gridWidth1480 - @gridGutterWidth1480 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1480: (@gridColumns * @gridColumnWidth1480) + (@gridGutterWidth1480 * (@gridColumns - 1));

// 1200px min
@T3gridWidth1200: 1208px; // T3 add
@gridGutterWidth1200: 20px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980: 940px; // T3 add
@gridGutterWidth980: 20px;
@gridColumnWidth980: floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));

// T3 Add: 768px-979px
@T3gridWidth768: 740px; // T3 add
@gridGutterWidth768: 20px;
@gridColumnWidth768: floor((@T3gridWidth768 - @gridGutterWidth768 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1480px-1680px
@fluidGridColumnWidth1480: percentage(@gridColumnWidth1480/@gridRowWidth1480);
@fluidGridGutterWidth1480: percentage(@gridGutterWidth1480/@gridRowWidth1480);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 980px-1199px
@fluidGridColumnWidth980: percentage(@gridColumnWidth980/@gridRowWidth980);
@fluidGridGutterWidth980: percentage(@gridGutterWidth980/@gridRowWidth980);

// T3 Extensed: 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);

You can customise the code in red as you wish.

Once done, remember to press the “</> LESS to CSS” button to compile less to css.

Let me know if this helps.

1 user says Thank You to Nazario A for this useful post

1. guyarbel

[guyarbel Friend guyarbelJoin date: March 2014Posts: 2Downloads:0Uploads:0 Thanks: 2]

#528360

Nazario Hi,
Thanks for your quick reply

Actually it didn’t solve the problem – the grid remain wide after changing to the smaller screen (and i did the less to css compile)
But it helped me understand exacly wht i think should be the next update for fixel, and can immensly improove it:

When I change the resolution to ipad or mobile phone, fixel automatically changes to 2 colums grid, and in the end to 1 column grid.
Well, if you could change the code, and open that behavior to all resolutions – by adding a maximum column width, it could make all the difference to fixel.

If I could tell fixel that my basic box should be maximum 300×300 pixels, and it would calculate and arrange the grid automatically according to my current resolution (any resolution), without giving fixel how many columns it chooses to put…
The only zoom in and out will be between changing the grid column number, and will happen automatically as it works right now in ipad resulution to mobile resolution.

Hope i was clear enough… well thanks again!

[Author]

Posts