Hi Pieto,

Which template are you using: T3 Blank or T3 BS3 Blank?

For T3 BS3 Blank template, please open the variables.less file (templates/t3_bs3_blank/less) then file the code:

// Media queries breakpoints

// --------------------------------------------------



// Extra small screen / phone

// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1

@screen-xs:                  480px;

@screen-xs-min:              @screen-xs;

@screen-phone:               @screen-xs-min;



// Small screen / tablet

// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1

@screen-sm:                  768px;

@screen-sm-min:              @screen-sm;

@screen-tablet:              @screen-sm-min;



// Medium screen / desktop

// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1

@screen-md:                  992px;

@screen-md-min:              @screen-md;

@screen-desktop:             @screen-md-min;



// Large screen / wide desktop

// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1

@screen-lg:                  1200px;

@screen-lg-min:              @screen-lg;

@screen-lg-desktop:          @screen-lg-min;

Now change the size in each responsive layout as you wish.

Gardner.

Hi Gardner Luna,
Thanks for replying!
I'm using T3 Blank - could you help me?
The procedure is the same for T3 BS3 Blank?

Thanks!

Hi Pietro,

For T3 Blank, it's a little bit different, Here is the how-to, open the "variables.less" file in "templates/t3_blank/less", find the grid declaration:

// GRID

// --------------------------------------------------



// Default 940px grid

// -------------------------

@T3gridWidth:             940px;  // T3 add. For non-responsive layout.

@gridColumns:             12;

@gridGutterWidth:         40px;

@gridColumnWidth:     	  floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);

@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));



// 1200px min

@T3gridWidth1200:         1200px;  // T3 add

@gridGutterWidth1200:     40px;

@gridColumnWidth1200:     floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);

@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));



// 980px-1199px

@T3gridWidth980:          940px;  // T3 add

@gridGutterWidth980:      40px;

@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));

Now change the value of @T3gridWidth of responsive layout you want.

IMPORTANT: after changing, please compile LESS to CSS so that when you disable dev mode, the changes will be applied.

Gardner.