Joomla Templates Club 406,261 posts

[playerocity Friend playerocityJoin date: February 2015Posts: 28Downloads:6Uploads:3 Thanks: 2]

#207867

Hello,

I am wanting to make certain columns in my site equal in height to each other. On top of this, I would like to make certain parts of each column also match up. Let me explain.

At the footer of my website (in positions footer-1 through footer-4, I have four columns as shown in this image:

I want each of these columns to be the same height as each other (right now they are only the same height because I don’t have enough content in them). I was also hoping I can line up the Home links with each other at the same height. They are not on the same height because the module titles are too long so they take up a second line. Is there any way to do this?

Thanks!

---

Attachments:

1. 

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

#575612

Hello
In this case share your working site url here . so i can what exactly you need .
without details its hard to assume what exactly you want to change on your site .

[playerocity Friend playerocityJoin date: February 2015Posts: 28Downloads:6Uploads:3 Thanks: 2]

#575625

laplayamaya.playerocity.com. The area I am describing is the footer section! Thanks

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

#575749

Hello Playerocity
I checked your site , Currently its showing the equal height 204 px for each module , can u check it again .
if you would like to change the min-height of module you can do it via module ID .
example : add this code in custom.css


#Mod172 {
min-height: 300px;
}
Now mod id 172 will have a min-height 300px .
Hope it helps.

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

#642078

Hello Playerocity
I checked your site , Currently its showing the equal height 204 px for each module , can u check it again .
if you would like to change the min-height of module you can do it via module ID .
example : add this code in custom.css


#Mod172 {
min-height: 300px;
}
Now mod id 172 will have a min-height 300px .
Hope it helps.

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

#740738

Hello Playerocity
I checked your site , Currently its showing the equal height 204 px for each module , can u check it again .
if you would like to change the min-height of module you can do it via module ID .
example : add this code in custom.css


#Mod172 {
min-height: 300px;
}
Now mod id 172 will have a min-height 300px .
Hope it helps.

[playerocity Friend playerocityJoin date: February 2015Posts: 28Downloads:6Uploads:3 Thanks: 2]

#575808

I understand how I can do that…however, there will be times that a min-height of 300px will not be enough as the web site is responsive. So at certain browser widths, the columns will shrink in width and therefore have a taller height. Is there any javascript/jquery I can add to this to make sure they are always the same height as each other?

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

#575810

Hi
responsive position behave is like this way , height is depend on the content . as there are different module position so u can not make them same auto. height it always depends on the content item height .
you can apply @media css style if you want to apply different equal content height by mod id .

[Author]

Posts