Joomla Templates Club 406,261 posts

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#644118

If did that at first. But then it is not 100% width. What is after 1200px is not 100%. My screen larger as 1200px, also my smart tv.

I have white blocks in the left and in the right footer, menu, breadcrumbs etc.I want the footer 100%, the breadcrums and also the banner

Also a part is not good responsive tablet and small computer screen. I saw this on my computer. Mobile is correct.

I like to have100% width of screen.

// GRID
// ————————————————–

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

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

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

// T3 Add: 768px-979px
@T3gridWidth768: 979px; // T3 add
@gridGutterWidth768: 0px;
@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);

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#742753

If did that at first. But then it is not 100% width. What is after 1200px is not 100%. My screen larger as 1200px, also my smart tv.

I have white blocks in the left and in the right footer, menu, breadcrumbs etc.I want the footer 100%, the breadcrums and also the banner

Also a part is not good responsive tablet and small computer screen. I saw this on my computer. Mobile is correct.

I like to have100% width of screen.

// GRID
// ————————————————–

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

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

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

// T3 Add: 768px-979px
@T3gridWidth768: 979px; // T3 add
@gridGutterWidth768: 0px;
@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);

[puntje Friend puntjeJoin date: April 2014Posts: 239Downloads:29Uploads:119 Thanks: 48 Thanked: 4 times in 3 posts]

#578135

It is still not 100% screen on my computer. i have a large screen.

Maybe someone else can tell me of this possible with this template. With the others i could give the left and right block another color.

Also will be nice if there is a button if people are down the page. They click and go up.

Hope someone can help me soon!

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

#578151

Hi
I am sorry but bootstrap2 only accepts the number px for that , You can change other number and not 100% .
If you will make it to 100% it does not compatible with other css classes . It take pretty customization to adjust changes for all class that is out of our scope .
Sorry for not much help in this case:(( .
For back to top button apply the solution given in This documentation .

[Author]

Posts