When I minimize the window, the text is missing.
The text overflows the sides of the window instead of wrapping downwards. Try running the code in a full window first, then adjust the width to see the issue.
I've been unable to find a solution on my own, could you please assist?
This is how it should look like when minimized:
https://i.sstatic.net/TZWo8.png
Here is the fiddle link: https://jsfiddle.net/zgLtbvyv/
/*everything in a column*/
.mb-flex-column{
display: flex;
flex-direction: column;
}
/*image and text in a row*/
.mb-flex-row{
display: flex;
flex-direction: row;
align-content: center;
}
/*Flex for correct alignment of image and text, sticking them 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 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>