How to make when covering for another unit the text be wrapped?

I have an adaptive height and width of the banner that the whole screen looks like this
5b5055bb852e9086428238.png
But when width comes to mobile screens,the logo creeps on the text and closes it.5b50561679e3d590877169.png
What properties in the media query, I need to prescribe that as the only block with a logo touch the block with text,the text be wrapped ?




 <meta charset="UTF-8">
 <style type="text/css">
 html, body {
 margin: 0 0 0 0;
background-color:#FFF;
}
</style>
<title></title>
<script type="text/javascript" src="https://banners.adfox.ru/files/adfox_HTML5.js"></script>


<a style="text-decoration:none" href="%banner.reference_user1%" target="%banner.target%">
<style>

body{cursor:pointer;width:100%;height:100%;}
body:hover .title{color:#3c6;}
.main {width:100%;height:130px;vertical-align: baseline;color:#000;font-family:"Helvetica Neue",Verdana,Arial,sans-serif;text-decoration:none;box-shadow: 0 -1px 0 #dbdbe1 inset;}
.pic {position:absolute;margin:0px;top:0px;left:0px;width:235px;height:129px;}
.info {box-sizing: border-box;position: relative; height:100%;margin: 0px 0px 0px 260px; padding: 15px 15px 15px 0px; z-index:1;background-color:#FFF;box-shadow: 0 -1px 0 #dbdbe1 inset;}
.title {margin: 6px 0px 0px 50px;font-weight: 600;display: block;position: relative;font-size: 1em;line-height: 1.3 em;max-height: 45px;min-height: 45px;}
.location {color: #7b7b7d;line-height: 100%;font-weight: normal;position: relative;margin: 0 0 4px;}
.date.cat {font-size: .8125em;line-height: 100%;}
.description {height: 20px;position:absolute; overflow: hidden;margin: 0px; width:80%;font-size: .875em;line-height: 1.5 em;display:block;bottom: 16px;}
.price {position: absolute;color: #3c6;float: right;line-height: 1.2 em;font-weight: 500; background-color:#FFF; padding-left: 5px;font-size: 1.3 em;right: 15px;top: 90px;}
.logo {position: absolute;float: right; background-color:#FFF; padding-left: 5px;top: 15px; right:15px; z-index:2;}

@media screen and (max-width:553px)
{
 .cat.description {display:none;}
}

@media screen and (max-width:453px)
{
 .main {height:92px;}
 .pic {width:168px;height:91px;}
 .info {margin: 0px 0px 0px 193px; padding: 15px 15px 15px 0px;}
 .title {font-size: .875em;line-height: 1em;max-height:33px;min-height:33px;}
 .location {line-height: 100%;font-weight: normal;position: relative;margin: 9px 0px 0px 0px;}
 .date {font-size: .6875em;}
 .price {font-size: .875em;line-height: 1em;right: 15px; top: 63px;}
}

@media screen and (max-width:353px)
{
 .main {height:106px;}
 .pic {width:175px;height:105px; z-index:0;margin-left:-35px;}
 .info {margin: 0px 0px 0px 105px; padding: 15px 15px 15px 15px;}
 .date {display:none;}
 .price {font-size: .875em;line-height: 1em;right: 15px; top: 77px;}
}

</style>


<div class="main">
 <div class="info">
 <div class="title">Samsung Galaxy A5 (2017)</div>
 <div class="location">
 <span class="date">Today, <script>d=new Date(); document.write(d.getHours()+":"+('0'+d.getMinutes()).slice(-2))</script></span>
 <span class="cat">/ Phones / All Belarus</span>
</div>
 <div class="description">In installments over 24 months</div>
 <b class="price">26,20 rubles/month</b>
</div>
 <img class="pic" src="img.jpg" border="0">
 <img class="logo" src="logo.jpg" border="0">
</div>

the <script>
admixAPI.on('load',function(){
admixAPI.init({
 'resize' : [
// {
// 'name' : 'state-1',
// 'width' : '100%',
// 'height' : '221px'
// },
{
 'name' : 'state-2',
'width':'100%',
'height':'130px'
},
{
 'name' : 'state-3',
'width':'100%',
'height':'92px'
},
{
 'name' : 'state-4',
'width':'100%',
'height':'106px'
}
],
});



 var oldW=0;
 function resize()
{
 var w = parent.window.innerWidth;
if(oldW!=w){
// if(w>1600)
// {
// admixAPI.resize.to('state-1');
// }
// else

if(w>500)
{
admixAPI.resize.to('state-2');
}
 else if(w>400)
{
admixAPI.resize.to('state-3');
}
else
{
admixAPI.resize.to('state-4');
}
oldW=w;
}
setTimeout(resize,200);
}
resize();
});
</script>


</a>
June 3rd 19 at 20:58
0 answer

Find more questions by tags JavaScriptHTMLCSS