NFOHump.com :: View topic - Responsive grid, equal height

Page 1 of 1

Interinactive
VIP Member

Posts: 29446

Posted: Fri, 13th Jun 2014 05:24 Post subject: Responsive grid, equal height	Quick Quote Quote

How? It's easy if they all have the same amount of content in each grid tile, sure. But at the moment I have a client who keeps making these crazy long titles and it throws the tiles/grid out of alignment. I can truncate the titles but that's not ideal. I found a way to do it with jQuery but I always feel like that's the poor mans solution. Is there a way with CSS?

Profile
PM

dingo_d
VIP Member

Posts: 14555

Posted: Fri, 13th Jun 2014 09:02 Post subject:

Dunno, I'd make them visually the same with padding etc. and then just see how they resize and do the same with media queries for various sizes...

EDIT:

See how they did it and just copy their solution Very Happy

http://www.volumethemes.com/flexgrid

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson

chiv wrote:

thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Profile
PM

PumpAction
[Schmadmin]

Posts: 26759

Posted: Fri, 13th Jun 2014 09:35 Post subject:	Quick Quote Quote

Care to mspaint what you want? => NFOrce GIF plugin <= - Ryzen 3800X, 16GB DDR4-3200, Sapphire 5700XT Pulse

Profile
PM

Werelds
Special Little Man

Posts: 15098
Location: 0100111001001100

Posted: Fri, 13th Jun 2014 11:09 Post subject:

Interinactive wrote:

How?

It's easy if they all have the same amount of content in each grid tile, sure. But at the moment I have a client who keeps making these crazy long titles and it throws the tiles/grid out of alignment. I can truncate the titles but that's not ideal.

I found a way to do it with jQuery but I always feel like that's the poor mans solution. Is there a way with CSS?

display:flex or what you did are the only options. Flex only works for modern browsers so if you need to support IE, you'll need a JS shim.

Join in on the war on LeoSatan

Profile
PM

Interinactive
VIP Member

Posts: 29446

Posted: Fri, 13th Jun 2014 11:27 Post subject:	Quick Quote Quote

⁢⁢ Last edited by Interinactive on Tue, 5th Oct 2021 02:04; edited 1 time in total

Profile
PM

dingo_d
VIP Member

Posts: 14555

Posted: Fri, 13th Jun 2014 12:00 Post subject:

Try:

Code:

.half .title, .half .price {
display: block;
text-transform: uppercase;
text-align: center;
word-wrap: break-word;
}

I added word-wrap and text is now inside the container.

EDIT: Altho if you add too many words the layout will kinda break.

Also those colors hurt my eyes Sad

"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson

chiv wrote:

thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found.

Profile
PM

Page 1 of 1

All times are GMT + 1 Hour