Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Boris Kamp
Boris Kamp
16,660 Points
Posted by Boris Kamp
Boris Kamp
16,660 Points

Cannot set height of link to height of parent. flexbox

Hi guys!

Im working on this page and am almost done. http://hbosafe.wpengine.com/prijzen-opleidingen/

To make the tables repsonsive I made use of flexbox and dropped the <table> Everything works awesome, however when I narrow down the sreen to about 900 pixels, you will see the 'inschrijven' button in the last cell of each row with white space above and below them when the row get's higher.

I need the link to get full height, and still center, I can't get both together. I only achieved the 100% when the text is not vertically centered.

any clue?

1 Answer

Jeremiah Bushau
Jeremiah Bushau
24,061 Points

Hey, I think I have a solution for you, not certain if it is the best one. Let me know if it works for you. I made the link display: flex, justify content and align-items: center then height: 100% seems to behave how you want.

.btn--full-width {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Thanks! works great. Why did you add the width: 100%? It can be left out if you asked me.

Thanks Jeremiah!

Jeremiah Bushau
Jeremiah Bushau
24,061 Points

width:100% was already there, because I just edited the .btn--full-width class instead of creating a new one. Glad it works : )

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

ah okay, well then I removed my own line of code because it was not needed (-:

Thanks again!