I am struggling with arranging two text boxes in a CSS flexbox. The left side contains a tagline while the right side has a brief summary. My goal is to have these boxes display side by side at the center of the webpage for desktop screens (min width 1024px), but stack up below that breakpoint for tablets and phones with widths below 1024px. The challenge is to ensure that the combined width of both boxes does not exceed 50% of the page horizontally. Currently, when the screen size increases, the text stretches to the ends of the screen despite my attempts to fix it!
Here is my HTML Code:
<div class="info-block">
<div class="info-item">
<div class="info-col">
<h4>Modern Approach, Innovative Solutions, Accessible Support</h4>
</div>
<div class="info-col">
<div class="info-text">We approach problems with holistic and practical solutions every time.</div>
</div>
</div>
</div>
And here is my CSS code:
.info-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
margin: 0;
}
.info-item:last-child {margin: 0;}
.info-col {
width: 46.6%;
font-size: 24px;
}
.info-col:first-child {
text-align: right;
}
.info-text {
margin: 0 0 20px;
font-size: 24px;
line-height: 115%;
font-weight: 200;
}
@media screen and (min-width: 1900px) {
.info-text {
margin-right: 200px;
max-width: 420px;
margin-top: 5px;
}
.info-col {
max-width: 420px;
}
I would greatly appreciate any help, suggestions, or insights to resolve this issue!