最小化窗口时文本丢失。
文字穿过窗户的两侧而不是向下包裹。 尝试运行代码完整窗口,然后调整窗口宽度,看看我的意思。
我找不到解决方案,你能帮忙吗?
最小化后,它应该是什么样的
这是小提琴链接: https://jsfiddle.net/zgLtbvyv/
/*everything is in a column*/
.mb-flex-column{
display: flex;
flex-direction: column;
}
/*image and text are in a row*/
.mb-flex-row{
display: flex;
flex-direction: row;
align-content: center;
}
/*Flex to aligne the image and text correctly, and make them stick to the side*/
.mb-flex-item:nth-child(odd) .mb-flex-row{
flex-direction: row-reverse;
}
.mb-content-wrap{
display: table;
overflow: hidden;
}
.mb-content{
display: table-cell;
vertical-align: middle;
text-align: left;
}
h4{
text-align: left;
padding-top: 0;
}

<div id=mb-gara-mobile>
<div class="mb-flex-column black">
<div class="mb-flex-item">
<div class="mb-flex-row">
<div class="image-wrap">
<img src="svg/gara1.svg" alt="">
</div>
<div class="mb-content-wrap">
<div class="mb-content">
<h4>Fornøydsgaranti</h4>
De to første øktene er gratis, og du kan kanslerere når du vil.
Fornøydsgarantien gjelder alle elever.
</div>
</div>
</div>
</div>
<div class="mb-flex-item">
<div class="mb-flex-row">
<div class="image-wrap">
<img src="svg/gara2.svg" alt="">
</div>
<div class="mb-content-wrap">
<div class="mb-content">
<h4>Karaktergaranti</h4>
Jeg refunderer 100% av totalbeløpet dersom jeg feiler med å forbedre karakteren til eleven. Gjelder for elever med startkarkater: 2, 3 eller 4.
Karaktergarantien gjelder kun for elever som har hatt mer enn 15 timer med med meg.
</div>
</div>
</div>
</div>
<div class="mb-flex-item">
<div class="mb-flex-row">
<div class="image-wrap">
<img src="svg/gara3.svg" alt="">
</div>
<div class="mb-content-wrap">
<div class="mb-content">
<h4>Oppfølgingsgaranti</h4>
Hver lørdag fra kl 0800-1200 setter jeg av en halvtime per elev til oppfølging. I stedet for å møte en gang hver uke, møtes vi to ganger i uken. Oppfølgingen er gratis. Oppfølgingsgarantien gjelder for alle elever.
</div>
</div>
</div>
</div>
</div>
</div>
&#13;