I have 2 text boxes in a css flexbox. Left side is a tagline and right side is a brief summary. I am trying to have them display on a webpage side by side in the center of the page for desktops only (i.e. min width 1024px) but let these boxes stack up below that breakpoint (i.e. on tablets, phones with widths below 1024px). The challenge here is that both of these text boxes combined cannot exceed 50% of the width of the page (horizontally). Right now, when expanding screen size, the text stretches to the ends of the screen. I tried many different fixes and nothing I tried worked properly!

My HTML Code:

        <div >
            <div >
                <div >
                    <h4>Modern Approach, Innovative Solutions, Accessible Support</h4>
                </div>
                <div >
                    <div >We approach problems with holistic and practical solutions, each and every time.</div>
                </div>
            </div>
        </div>

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; 
  }

Any help or suggestions would be greatly, greatly appreciated!

CodePudding user response：

Easy. Add this to your CSS:

@media screen and (max-width: 1024px) { /* If screen size is maximum 1024px */
    .info-item {
        flex-direction: column; /* Set the flex direction to */
    }

    .info-col {
        width: 100%; /* Setting width to 100% */
    }
}

To keep the items centered, you need to set the width to 100% while you stack the columns on smaller screens.