CSS tables not responsive - not shrinking or growing

HTML-CSS
1

Tell us what’s happening:

I am almost done building my Product Landing Page, but can’t figure out one thing: how to make my three pricing tables grow and shrink. I would like my tables to be set at a standard width of 300px (flex-basis: 300px;) and grow and shrink to fill the container (min-width: 250px; max-width: 350px;). Instead, my tables keep defaulting to whatever the min-width is set to, even though there is more room in the container.

Here is the CSS for the pricing container, which contains my three tables, and the CSS for the table element.

Your code so far

#pricing {
display: flex;
flex-direction: row;
justify-content: center;
max-width: 1000px;
}

table {
min-width: 250px;
max-width: 350px;
flex-basis: 300px;
flex: 1 1 auto;
border: solid rgb(119,119,119);
margin: 60px 10px 40px 10px;
text-align: center;
border-collapse: collapse;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

2

It would be easier if you got a codepen for us to run your code. Just by looking though I see that you’re using flex: 1 1 auto;, flex is a short-hand for flex-grow, flex-shrink and flex-basis, which means you’re overwriting your own flex-basis: 300px you’ve defined in the line above it.

3

Thanks, and sorry about that - here is a link to my codepen:

I feel like I’ve tried all different combinations with /without flex-grow, flex-shrink and flex-basis, and it hasn’t made much of a difference - keeps defaulting to min-width.

4

It looks like when you set #main align-items: center it forces its children to be as small as possible. What I did was to force #pricing to stretch by using align-self: stretch, that means it will be as big as possible, so you must remove that max-width: 1000px otherwise it will be aligned to the left instead of centered.

I see that you’ve removed the third argument from table flex, I think it is better if you remove the flex-basis: 300px and just use the flex argument since you’re already using it anyway by doing this: flex: 1 1 300px.

Let me know if that helps.

1 Like
5

That’s great. Thank you @ghukahr.

This problem persists in the @media query: the table goes back down to a small size, rather than starting at the flex-basis of 300px. What should I do?

Also, conceptually, I’m not sure I understand why align-self: stretch, fixed the original problem, but it’s okay if it goes without explanation…

6

You can remove table’s max-width (because it will need to grow) and replace #pricing auto margins in margin: 50px auto 30px auto to 0 or another value. That will make it behaves like you want.

The way your page is configured that’s causing some issues. I’ll try to explain but take it with a grain of salt because I also don’t understand it completely.

Your #main has a flex-direction of column and it align-items to the center, to align items to the center the browser will give the maximum it can of margin on the left and right to each child. Which means max-width will be ignored, actually, if you don’t give any width or min-width to a child, it would have 0 width and won’t show up. What this cause is that every child will be the smallest it can be (min-width), so when you resize the browser window it won’t shrink anymore, it will create a scroll instead.

That’s why we gave #pricing align-self stretch (which is the default value of align-items/align-self), thus the browser won’t give it any margin, making the child the biggest it can be and with the power to resize itself. And that’s why we had to remove the max-width: 1000px, because since the parent don’t try to center it, it would be stuck on the left instead of growing all the way to the other side.

In general, we could give that div a margin: 0 auto to center it. But that’s where things get really messy, if you gave margin: auto to a flex children, it would calculate the maximum it can give, which was our first problem in the first place, making the child small again. (read more here: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6)

All of that for our first fix, but it also explains our second fix as you can see.

There’s a better way? Yes. Use flex-box only where it is really necessary, there’s no point in giving #main a flex-box for example, we could just layout everything in html normally or use a grid. Read more here: https://brolik.com/blog/when-to-use-flexbox/

I hope you can understand at least something from this mess I written :sweat_smile:

7

Thanks for the detailed explanation. The articles you shared were really helpful, and your comment about “use flexbox only when it’s necessary”. I understand some of this, but I think the takeaway is to use flexbox sparingly, especially with parent containers, since there are implications for margin and width which are difficult to control at lower levels or when more flex is introduced.

I’m going to try to restructure the layout of the page using CSS grid or HTML, like you suggested. I think this makes more sense than trying to make sense of the mess I made here. If I run into problems, I’ll make sure to post :slight_smile: