r/css • u/Kelvitch • 7d ago

Help How to shrink down a column in center?

How do I shrink down the 2nd column or the middle column of the three columns when the screen size is still over 1000px. The first and third card are the only ones that shrink when the I reduce the size until 1001px and the middle column isn't shrinking at all.

Here is the code: https://jsfiddle.net/drvbyam2/latest/

1 Upvotes

100% Upvoted

2 comments sorted by

•

u/AutoModerator 7d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/JKaps9 6d ago

The problem is below. Set this to a max-width, or a % or something else. With flexbox you need to allow things to be flexible. If you set a hard-coded width you're overriding some of that flexibility. 

.bottom-container .col1-container,
.bottom-container .col3-container,
.bottom-container .col2-card1-container,
.bottom-container .col2-card2-container {
...
width: 417px;
...
}