Cześć :)
Jestem na etapie stosowania bootstrapa do stopki mojej strony.
Mój kod hmtl:
<footer class = "container-fluid main_footer">
<div class = "row">
<div class = "col-4 main_footer-div">
<p>Copyright: PoElektro 2020. Wszystkie prawa zastrzeżone.</p>
</div>
<div class = "col-3"></div>
<nav class = "col-5 main_nav">
<div class = "row">
<ul class = "col-12 footer-list">
<div class = "row">
<li class = "col-5 footer-list-element">
<a href="#">Wsparcie</a>
</li>
<li class = "col-7 footer-list-element">
<a href="#">Warunki użytkowania</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
</footer>
I CSS odnoszący się bezpośrednio do mojej stopki:
footer{
position: fixed;
width: 100%;
bottom: 0px;
height: 10%;
left:0px;
padding: 10px;
background-color:#00BFFF;
z-index: 1;
}
.main_footer > div{
display:inline-block;
vertical-align: middle;
}
.main_nav{
display: inline-block;
text-align: right;
width: calc(100% - 52%);
vertical-align: middle;
}
.footer-list{
display: inline-block;
list-style: none;
text-align: right;
}
.main_footer-div{
@media screen and (min-width: 768px) {
font-size: 5px;
}
}
.footer-list-element{
padding: 20px;
display: inline-block;
}
.footer-list-element a{
text-decoration: none;
color: black;
}
.footer-list-element a:hover,
.footer-list-element a:active{
background-color:red;
color: white;
font-weight: bold;
border: 10px solid red;
border-radius: 8px;
}
Problem po zastosowaniu responsywności wystąpił taki, że pierwszy <div> i drugi <nav> znajdują się w pierwszych 1/12 strony, a ponadto nie obok siebie, a pod sobą. Ten drugi problem mogę rozwiązać zmniejszając czcionkę paragrafu z pierwszego div-a, ale jak poradzić sobie z pierwszym? Z góry dziękuję za odpowiedzi. :)