Joomla Templates Club 406,261 posts

[jtester Friend jtesterJoin date: September 2012Posts: 42Downloads:2Uploads:16 Thanks: 16 Thanked: 1 times in 1 posts]

#200408

Hi

I follow this thread:http://www.joomlart.com/forums/topic/layout-width/

but it did’nt work

Why?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#545395

<em>@jtester 440574 wrote:</em><blockquote>Hi

I follow this thread:http://www.joomlart.com/forums/topic/layout-width/

but it did’nt work

Why?</blockquote>

Hello as suggest by Ninja Lead you need to define layout width in px and span size.
Can you tell us in detail , what problem your are facing , and what exactly you want to do ,
So that i can assist you better

[jtester Friend jtesterJoin date: September 2012Posts: 42Downloads:2Uploads:16 Thanks: 16 Thanked: 1 times in 1 posts]

#545396

I define total width in the variables.less in the templates/ja_magz/less

than compile LESS to CSS

but the width is still 980px

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

#545625

<em>@jtester 440602 wrote:</em><blockquote>I define total width in the variables.less in the templates/ja_magz/less

than compile LESS to CSS

but the width is still 980px</blockquote>

It would be awesome if you can possibly include a screenshot and description on that particular screenshot on what you would like to do. I will check and help you with the solution.

[jtester Friend jtesterJoin date: September 2012Posts: 42Downloads:2Uploads:16 Thanks: 16 Thanked: 1 times in 1 posts]

#545752

I want

like

and can responsive

---

Attachments:

1. 
2. 

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

#545769

About the change layout width and be responsive as you mentioned, you can change as follows:

Open the templates/ja_magz/less/variables.less file

Change

@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: 990px; // 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));
To


@T3gridWidth: 1280px; // 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: 1280px; // T3 add
@gridGutterWidth1200: 40px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

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

Once done, click compile LESS to CSS button from admin of JA Magz Template (Make sure you backup all old customised css files because this action will override those files)

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

1. jtester

[gpon Friend gponJoin date: January 2010Posts: 8Downloads:122Uploads:2 Thanks: 2]

#556648

Hello Ninja
I tryed your solution for 1080 px it works for all the devices except in ipad landscape position..There the page is loosing the white space left and right..
Do you have any solution..?
Thank you in advanced
Gpon

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

#556762

It’s very hard to guess and suggest the solution without clue. It would be great if you can include url of your site, an illustrated screenshot of what the problem still face on your site. I shall help you to check it further.

[Author]

Posts