Joomla Templates Club 406,261 posts

[webmasterbea Friend webmasterbeaJoin date: March 2009Posts: 87Downloads:4Uploads:7 Thanks: 3]

#181805

Hi, I need to change the column width here: http://lotoazulhotel.com/jatc_droid_j25/index.php/servicios.
I asked about how to solve this using the same template, version 1.5, (you can see the result here: http://lotoazulhotel.com/servicios) but unfortunately, I lost my bookmark, and I cannot find the answer anymore.
Your help will be greatly appreciated

Thanks!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#471420

Hi there,

Could you make a screenshot of where and how you want to change column width? also set Compress CSS in Template manager to No I shall check this for you.

[webmasterbea Friend webmasterbeaJoin date: March 2009Posts: 87Downloads:4Uploads:7 Thanks: 3]

#471475

Hi, thanks for your help.
You can see as screenshot you asked for here: , and if you go to the site by pressing the link I provided: (http://lotoazulhotel.com/jatc_droid_….php/servicios ), you will be able to see it. The separation between the columns is too tight, as you will be able to see.
I have set the CSS stylesheet to “Optimize CSS: NO”.

Thank you, an looking forward to your reply.

---

Attachments:

1. 

[webmasterbea Friend webmasterbeaJoin date: March 2009Posts: 87Downloads:4Uploads:7 Thanks: 3]

#471476

Hi, thanks for your help.
You can see as screenshot you asked for here: , and if you go to the site by pressing the link I provided: (http://lotoazulhotel.com/jatc_droid_….php/servicios ), you will be able to see it. The separation between the columns is too tight, as you will be able to see, especially near the “Read More” area, where this is more evident.
I have set the CSS stylesheet to “Optimize CSS: NO”.

Thank you, an looking forward to your reply.

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471542

In your CSS file
templates/ja_droid/css/k2.css
Find these lines:

div.itemContainer {
border-bottom: 3px solid #CBD0E2
float: left;
margin-bottom: 10px;
padding-bottom: 10px;
}
Then change to:

div.itemContainer {
border-bottom: 3px solid #CBD0E2
float: left;
margin-right: 20px;
padding-bottom: 10px;
width: 45% !important;
}


[webmasterbea Friend webmasterbeaJoin date: March 2009Posts: 87Downloads:4Uploads:7 Thanks: 3]

#471579

Hi, many thanks for your help, however, although there’s a change, the right hand side column disappears underneath the left, there’s only one column of items displayed instead of two. I changed the “margin-right: 20px;” in your code from “20” to “10”, and then to “0” just to test, but still got the same result. Right now the code is exactly as you proposed. What do you suggest?

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471655

<em>@webmasterbea 344360 wrote:</em><blockquote>Hi, many thanks for your help, however, although there’s a change, the right hand side column disappears underneath the left, there’s only one column of items displayed instead of two. I changed the “margin-right: 20px;” in your code from “20” to “10”, and then to “0” just to test, but still got the same result. Right now the code is exactly as you proposed. What do you suggest?</blockquote>
I just check your site, the style is not added. Maybe you still not clear cache to see the changes.

[webmasterbea Friend webmasterbeaJoin date: March 2009Posts: 87Downloads:4Uploads:7 Thanks: 3]

#471691

Hi, I did, but I am under a lot of pressure to finish this website migration and this issue is holding the website delivery, so I went and looked again for the first solution I got during the first time I posted this problem, and I just found the response that helped me with the J!1.5 version, and I just now changed the code to the one he gave me. This is the original thread I am referring to:
“Thread: how to fix K2 section content columns too close to each other?”
“You replace the code from/templates/ja_droid/html/com_k2/templates/ja_droid/category.php
Code:
<div class=”itemContainer” style=”width:<?php echo number_format(100/$this->params->get(‘num_primary_columns’), 1); ?>%;”>
with
Code:
<div class=”itemContainer” style=”width:<?php echo number_format(90/$this->params->get(‘num_primary_columns’), 1); ?>%;<?php if(($key+1)%($this->params->get(‘num_primary_columns’))==0) { echo ‘float:right;’; } ?>”>”

I used the piece of code he mentions on that thread, on the J!2.5 theme, and it kind of works, the columns appear better separated, BUT one column appears “lower” that the other. Please press this link to see what I mean:
http://lotoazulhotel.com/jatc_droid_j25/index.php/servicios

Could you tell me what’s the reason?

Many thanks again.

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471741

<em>@webmasterbea 344520 wrote:</em><blockquote>Hi, I did, but I am under a lot of pressure to finish this website migration and this issue is holding the website delivery, so I went and looked again for the first solution I got during the first time I posted this problem, and I just found the response that helped me with the J!1.5 version, and I just now changed the code to the one he gave me. This is the original thread I am referring to:
“Thread: how to fix K2 section content columns too close to each other?”
“You replace the code from/templates/ja_droid/html/com_k2/templates/ja_droid/category.php
Code:
<div class=”itemContainer” style=”width:<?php echo number_format(100/$this->params->get(‘num_primary_columns’), 1); ?>%;”>
with
Code:
<div class=”itemContainer” style=”width:<?php echo number_format(90/$this->params->get(‘num_primary_columns’), 1); ?>%;<?php if(($key+1)%($this->params->get(‘num_primary_columns’))==0) { echo ‘float:right;’; } ?>”>”

I used the piece of code he mentions on that thread, on the J!2.5 theme, and it kind of works, the columns appear better separated, BUT one column appears “lower” that the other. Please press this link to see what I mean:
http://lotoazulhotel.com/jatc_droid_j25/index.php/servicios

Could you tell me what’s the reason?

Many thanks again.</blockquote>

Wow thanks for sharing the solution : )

About your concern, I think It because each content of block not the same, one’s long, one’s short. You can avoid this by, resize for images of K2 content to the same size, and place readmore at equal character. That would make the block have the same height

[webmasterbea Friend webmasterbeaJoin date: March 2009Posts: 87Downloads:4Uploads:7 Thanks: 3]

#471792

Hi,
I am afraid that is not the reason for the problem with the columns, one appearing higher than the other on the J!2.5 version. The images are all re-sized automatically, and they are all set the same as the example provided for Joomla 1.5 http://lotoazulhotel.com/servicios. My point is that the solution should work the same for J!2.5 I just need help to make the columns look at the same height. I need to know what is causing that. Can you help?

[webmasterbea Friend webmasterbeaJoin date: March 2009Posts: 87Downloads:4Uploads:7 Thanks: 3]

#471803

I am now closer to get the desired result that can be seen on the J1.5 version (http://lotoazulhotel.com/servicios)
What I did was to use the code I added above, PLUS I added the code you suggested too to “templates/ja_droid/css/k2.css”However, the space between the content columns is still kind of tight, not as open as in the 1.5 version, AND the modules on the right hand side column are having trouble loading at the top of the column on the http://lotoazulhotel.com/jatc_droid_j25/index.php/servicios page. Any suggestions as to where to look to fix this?

Many thanks.

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#471907

<em>@webmasterbea 344671 wrote:</em><blockquote>I am now closer to get the desired result that can be seen on the J1.5 version (http://lotoazulhotel.com/servicios)
What I did was to use the code I added above, PLUS I added the code you suggested too to “templates/ja_droid/css/k2.css”However, the space between the content columns is still kind of tight, not as open as in the 1.5 version, AND the modules on the right hand side column are having trouble loading at the top of the column on the http://lotoazulhotel.com/jatc_droid_j25/index.php/servicios page. Any suggestions as to where to look to fix this?

Many thanks.</blockquote>
The code
<div class="itemContainer" style="width:<?php echo number_format(90/$this->params->get('num_primary_columns'), 1); ?>%;<?php if(($key+1)%($this->params->get('num_primary_columns'))==0) { echo 'float:right;'; } ?>">
I have tried and it works.
Maybe you didn’t copy to the right place, there should be 3 place to paste, for first item, second items, and last item.

You replace the code from/templates/ja_droid/html/com_k2/templates/ja_droid/category.php
and did you set using template ja_droid for K2
After adding your code, please clear cache.
<em>@webmasterbea 344656 wrote:</em><blockquote>Hi,
I am afraid that is not the reason for the problem with the columns, one appearing higher than the other on the J!2.5 version. The images are all re-sized automatically, and they are all set the same as the example provided for Joomla 1.5 http://lotoazulhotel.com/servicios. My point is that the solution should work the same for J!2.5 I just need help to make the columns look at the same height. I need to know what is causing that. Can you help?</blockquote>
In J15, the height of block also not the same, to handle this, only by setting image have the same size, and the text description has the same number characters.

[Author]

Posts