For design purposes I want to have one sentence split over to another line, the issue I am having is seamlessly having it fit within the containing div as the resolution gets smaller. The way I currently have it set up is by setting the width of the sentence to be smaller than the containing div so that any text after the word "all" moves down to the next line. The issue I am running into is obviously the % width doesn't look good on any media query lower than the highest resolution.
Is the only way to do this is by creating multiple media queries?
Current Code:
div.slide {
padding: 110px 30px 110px 30px;
height: 500px;
text-align: center;
}
div.slide-content {
padding: 0px;
margin: 0 auto;
max-width: 1100px;
}
div.slide-text {
font-weight: 400;
font-size: 17px;
width: 75%;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
<div class="slide">
<div class="slide-content">
<div class="slide-text">Lorem ipsum dolor sit amet, cLorem ipsum dolor sit amet onsectetuer adipiscing elit-all Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>
</div>