Need opinion on when to use media queries

[bmcode]

I am using CSS with FlexBox. Here is what I’m working on, I pasted it on CodePen:

When you lower the screen size, the bottom content goes outside of its container.

When content starts to leave its container, due to being too large, would you use media queries to fix this? I was going to make a different layout once the screen got to a certain size, but it is bleeding outside of the container before then.

NOTE: You’ll have to view it on CodePen and lower the screen size to see what I mean.

[Ray.H]

@bmcode

When you lower the screen size, the bottom content goes outside of its container.

That’s because it has a fixed height on it.

@bmcode

When content starts to leave its container, due to being too large, would you use media queries to fix this?

Just remove the fixed height.
You can also use align-items for vertical alignment.

.flex-container {
    display: flex;
    background-color: white;
    /*height: 200px;*/
    width: 650px;
    margin: auto;
    align-items: center; /* optional alignment*/
}

[bmcode]

That was easier than I thought. Thanks!