最小化窗口时文本丢失

时间:2017-05-07 12:07:36

标签: html css

最小化窗口时文本丢失。

文字穿过窗户的两侧而不是向下包裹。 尝试运行代码完整窗口,然后调整窗口宽度,看看我的意思。

我找不到解决方案,你能帮忙吗?

最小化后,它应该是什么样的

enter image description here

这是小提琴链接: 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;
&#13;
&#13;

0 个答案:

没有答案