Joomla Templates Club 406,261 posts

[manuelreil Friend manuelreilJoin date: February 2010Posts: 25Downloads:7Uploads:0 Thanks: 8 Thanked: 4 times in 1 posts]

#195360

Hi,

I am looking to add a grid element with size 4×1.*
I read*http://www.joomlart.com/forums/topic/grid-dimension/, but the solution was not published in the forum.

The module ‘Messagebox’ should have size 4×1.*I inserted a quick hack:

.grid-4×1 {
* * width: 1192px !important;
* * max-height: 302px;
}

This does the trick, but of course it is not responsive anymore.
Url:*http://dev.lackner-consulting.de/contact.html

Could you please support how to define the less/css correctly with r

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

#525058

Here are steps to add new grid element size in JA Fixel template.

With grid 4×1:

+ Define a new css style to support grid4x1 as in this thread

+ Open the templates/ja_fixel/js/script.js file

Change

items.width(itemWidth).height(itemWidth);
items.filter('.grid-2x1').width(itemWidth * 2);
items.filter('.grid-1x2').height(itemWidth * 2);
items.filter('.grid-2x2').width(itemWidth * 2).height(itemWidth * 2);
items.filter('.grid-3x2').width(itemWidth * 3).height(itemWidth * 2);

To

items.width(itemWidth).height(itemWidth);
items.filter('.grid-2x1').width(itemWidth * 2);
items.filter('.grid-1x2').height(itemWidth * 2);
items.filter('.grid-2x2').width(itemWidth * 2).height(itemWidth * 2);
items.filter('.grid-3x2').width(itemWidth * 3).height(itemWidth * 2);
items.filter('.grid-4x1').width(itemWidth * 4).height(itemWidth);

Let me know if it helps.

[pradino Friend pradinoJoin date: May 2014Posts: 13Downloads:0Uploads:4 Thanks: 4]

#537312

Thanks for that….

What about changing the grid height and width? I have been trying to change the current home page images 300px by 300px to something like 280px by 184px but have not succeeded yet. Of course these images will be with some margins on the sides. Can you help me find out how to change the entire dimension of the grid.

Thanks

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

#537512

@pradino: The dimension of the grid will depend on the total width of site and span from bootstrap. It’s very difficult to change dimension in px as you mentioned.

So that I can take a look and try to assist, please provide the url of the site you’re working on and the screenshot of what you are expecting. I will help you check further

[pradino Friend pradinoJoin date: May 2014Posts: 13Downloads:0Uploads:4 Thanks: 4]

#537834

@ninjalead

URL: http://bysitu.com/joomlademo/index.php/en/

I could not manage the gappings between grid in columns.
Thanks

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

#538441

My apologies for this late response, somehow I missed this thread.

You can find and manage the gap between grid in columns, you can change css class in the templates/ja_fixel/css/custom.css file.

.fixel-grid .items article {
margin-left: 5px;
margin-right: 5px;
}

[Author]

Posts