We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (1)

Resolved Where can I find an explanation for col- classes?

0
Votes
Undo
  1. Lee Tempest
    Lee Tempest
  2. Sherlock Holmes
  3. General Discussion
  4. Thursday, 07 May 2015
  5.  Subscribe via email
I'd really like to understand what the col- classes relate to and on what devices each one is used.

Looking at the page code there are a number of options:

col-xs-

col-sm-

col-md-

col-lg-

I understand that the numbers after this relate to the width within a row and must add up to 12 when used with columns. but what are the breakpoints for each to be activated?

Any chance of a page within the documentation to explain and highlight the standard CSS classes and their uses? It would really help when customising the template views.

Thanks

Lee
Comment
There are no comments made yet.
Responses (1)
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

Sorry for the late reply, you can check how its defined in the variables.less file, open the file and you would see the following code:

// 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;



// So media queries don't overlap when required, provide a maximum

@screen-xs-max:              (@screen-sm-min - 1);

@screen-sm-max:              (@screen-md-min - 1);

@screen-md-max:              (@screen-lg-min - 1);





// Grid system

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



// Number of columns in the grid system

@grid-columns:              12;

// Padding, to be divided by two and applied to the left and right of all columns

@grid-gutter-width:         30px;

// Point at which the navbar stops collapsing

@grid-float-breakpoint:     @screen-sm-min;


I recommend not to change the grid column as it is standard.

Regards.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.