Joomla Templates Club 406,261 posts

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#907980

Hi, how easy is to get 100% width on the large resolutions (tablet, desktop), I mean to NOT have the left and right grey areas? So the site covers all the screen. thanks . darenGr

---

Attachments:

1. 

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

#908693

Hi @darengr
IN bootstrap3 (T3) the width is defined in the px . you can define the specific width for different screen sizes .
Here is documentation that help u to change the template width .
Compile Less to Css after change the width .

Do not forget to take full backup of site before applying the above changes .

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#908907

thanks,
the link you supplied says >

2: For templates developed with T3 Framework version 2.x+ and integrated Bootstrap 3

Here is the list of templates developed with T3 Framework version 1.4.x- and integrated Bootstrap 2.

JA Sugite
JA Decor
JA Biz
Purity III
JA Bookshop
JA Appolio
JA Obelisk
JA University (T3 version)>

so I cannot understand it. It also does not mention Elicyon.

Anyway, what I mean is automatically find the display resolution and expand to the maximum, without scrol bars. How can I achieve this?

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

#908933

Hi
You need to go to same path in this template .
Path : /templates/ja_elicyon/less/variable.less Here you can see the code : http://prntscr.com/anybwm
I am afraid in bootstrap3 it does not auto width . You need set the width as given in variable.less file
Compile Less to css after changes .

Do not forget to take full backup of site before applying chnages .

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#909988

thanks for your help, but I do not understand why the layout can not be like for example JA healthcare, so responsive full auto width. Isn’t this also with bootstrap3?
All I need is a large layout without empty columns (areas) on the sides, like in the first page of JA healthcare demo. So any image covers the whole page, from left to right, without emtpy areas.

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

#909994

Hi
In this case you need to increase the width of the container , so it can fill more space . Use my suggestion given Here JA Healthcare also based on the BS3 . All template use different container width but not 100% . If you will check the template they are also using fixed width according to screen sizes .

[darengr Friend darengrJoin date: January 2012Posts: 108Downloads:112Uploads:30 Thanks: 4 Thanked: 1 times in 1 posts]

#910027

by container, you mean the number ie
@screen-hd: 1680px
and similar, within variables.less?
And if someone has a display with 2000px resolution they will see empty columns at the 2 sides?

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

#910081

Hi This is the maximum width for more HD display (big devices ) . This feature is added in new templates .
You use tweak in custom.css file to apply 100%width for container
/css/custom.css file (create new if it does not exist) and add new rule

@media (min-width: 1600px) { .container-hd { width: 100%;    }   }

You can see the Bootstrap 3 grid options Here

[Author]

Posts