Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.
В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.
На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.
Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.
CSS code блока и т.д:
@media (max-width: 320px) {
.wat{
left: 260px;
}
}
.wat{
margin:0;
margin-left: 5.5em;
left: auto;
top: 260px;
border: 3px red solid;
border-radius: 3px;
width: 150px; height: 50px;
position: relative;
padding-left: 4px;
padding-top: 0px;
display: block;
}
#btn3{
position: absolute;
margin-left: 8px;
top: 13px;
border: 3px red solid;
border-radius: 3px;
width: 150px; height: 50px;
}
span{
font-size: 16pt;
margin-left: 50px;
position: absolute;
top: 14px;
left: -1px;
font-size: 16pt;
color: white;
}
.opa{
display: block;
border-radius: 3px;
border: 3px red solid;
width: 150px; height: 50px;
position: relative;
z-index: 100000;
margin-top: -12.8em;
margin-left: 18.5em;
}
@media (max-width: 320px){
.opa{
width: 25%;
height: auto;
}
}
Вот HTML Код:
<ul id="slides">
<li class="slide showing">Slide 1
<!--<div class='wat'><img id='btn3' src='app2.png'></img></div>-->
</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
</ul>
<div class='opa'>
<img src='app.svg'></img>
<span>App Store</span>
</div>
