1
У меня проблема с фиксированными divs в правом и левом нижнем углу. На рабочем столе они выглядят хорошо, дивы находятся в углу. Однако, когда на мобильном устройстве, divs фиксируются и перекрывают остальную часть контента. Я попробовал margin-bottom, но это не устранило проблему.Как создать промежуток между фиксированными нижними div и оберткой
Что я хочу, так это то, что два информационных divs фиксированы, но когда вы находитесь на мобильном телефоне, существует разрыв между информационными div и div class = "wrap".
Вот мой HTML
<div class="wrap">
<h1 class="titel">Media Media B.V.</h1>
</div>
<div class="info container">
<div class="row">
<div class="address col-md-6">
<p><strong>Media Media B.V.</strong><br/>
Vriendsgracht 77<br/>
2542AH Utrecht<br/>
The Netherlands</p>
<p><abbr title="Phone">Skype:</abbr> john.doe<br/>
[email protected]</p>
</div>
<div class="vat col-md-6">
<p><abbr title="Chamber of Commerce">CoC:</abbr> 4444444<br/>
<abbr title="Value Added Tax">VAT:</abbr> NL444444444</p>
</div>
</div>
</div>
Это CSS я использовал
body {
background-color: #1A4C62;
height: 100%;
}
.wrap {
background-color: blue;
margin-bottom: 7.5%;
position: relative;
}
.titel {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
padding-top: 7.5%;
}
.titel2 {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
}
.logo {
margin: 0 auto;
}
.ondertitel {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
}
.info {
color: #fff;
font-family: 'Lato', sans-serif;
}
div.info {
width: 100%;
}
div.info div p {
margin: 2px 0px 5px 0px;
}
div.info div strong {
display: inline-block;
font-size: 13px;
}
div.info .address {
position: fixed;
bottom: 0;
left: 0;
width: 150px;
padding: 10px 25px 10px 15px;
border: 1px solid #fff;
}
div.info .vat {
position: fixed;
bottom: 0;
right: 0;
width: 150px;
padding: 10px 15px 10px 25px;
border: 1px solid #fff;
}