Joomla Templates Club 406,261 posts

[brenot Friend brenotJoin date: March 2011Posts: 223Downloads:202Uploads:49 Thanks: 67 Thanked: 8 times in 3 posts]

#189339

how can I add a new screen size to the responsive?

I need to configure the site to be responsive at BIGGER resolutions..

Can you give me the way?

thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#500735

JA Brisk template is built along with T3 framework which appearing with Twitter Bootstrap, you can make the same format Grid system of twitter boostrap. I will help you responsive at BIGGER resolutions.

[brenot Friend brenotJoin date: March 2011Posts: 223Downloads:202Uploads:49 Thanks: 67 Thanked: 8 times in 3 posts]

#500763

Sorry, I need directions. Which file I need to change? What I need to add?

Can you give ne examples????

Thank you

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#500832

In JA Brisk Template defined parameter help you to change that.

Open templates/ja_brisk/less/variables.less file

<blockquote>// 1200px min
@T3gridWidth1200: 960px; // T3 add
@gridGutterWidth1200: 36px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));</blockquote>

Change my red mark with big resolution do you like.

After apply any changes LESS file you need click Compile LESS to CSS button from Admin of JA Brisk Template.

Please backup all customize css file before click Compile LESS to CSS button because all customize will be overridden

1 user says Thank You to Ninja Lead for this useful post

1. brenot

[brenot Friend brenotJoin date: March 2011Posts: 223Downloads:202Uploads:49 Thanks: 67 Thanked: 8 times in 3 posts]

#501137

Its a good start..

But in fact I need to add 2 new big resolutions 1200 and 1920px, can you help me to undertand how to do it?

Thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#501167

In JA Brisk Template defined WIDE, NORMAL, XTABLET, TABLET, MOBILE layout and very difficult if you want to add 2 new big resolutions 1200px and 1920px but you can change NORMAL: 1920px and WIDE: 1200px.

This way will help you to do that.

Open template/ja_brisk/less/variables.less file

From

<blockquote>
// 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: 960px; // T3 add
@gridGutterWidth1200: 36px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));
</blockquote>

Change to
<blockquote>
// Default 940px grid
// ————————-
@T3gridWidth: 1920px; // 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: 36px;
@gridColumnWidth1200: floor((@T3gridWidth1200 – @gridGutterWidth1200 * (@gridColumns – 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns – 1));
</blockquote>

Remember to click Compile LESS to CSS button from Admin of JA Brisk Template

[Author]

Posts