.footer {
display: flex;
position: fixed;
bottom: 0;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 30vh;
background-color: #a44949;
font-family: 'Open Sans', sans-serif;
}
.footer-list {
display: flex;
justify-content: space-around;
}<div class="footer">
<h4>Kontakt</h4>
<ul class="footer-list">
<li>Mobilni: 062/329-077</li>
</ul>
<h4>Podaci</h4>
<ul class="footer-list">
<li>PIB: 112295370</li>
<li>Matični broj: 66007057</li>
</ul>
<h4>Lokacija</h4>
<ul class="footer-list">
<li>Oslobođenja 32c, Rumenka</li>
</ul>
</div>How it looks like:
I want those ul elements placed under the h4 , how do I do it? did I mess something up or? I will add more stuff to it, I planned to add a google map for the location too
EDIT: Another issue
So, I’ve solved my first and second issue, now here comes the third. Added a map thumbnail, h4 positioning kinda got messed up as you can see here
enter code herehttps://jsfiddle.net/sushmee/nz1txweh/1/
EDIT2: And another issue
How to fix this div with p and text in it, goes under footer instead of expanding the body? I have another line of text, you just cant see it
Answer
.footer {
display: flex;
position: fixed;
bottom: 0;
width: 100%;
justify-content: space-around;
align-items: center;
min-height: 30vh;
background-color: #a44949;
font-family: 'Open Sans', sans-serif;
}<div class="footer">
<div>
<h4>Kontakt</h4>
<ul>
<li>Mobilni: 062/329-077</li>
</ul>
</div>
<div>
<h4>Podaci</h4>
<ul>
<li>PIB: 112295370</li>
<li>Matični broj: 66007057</li>
</ul>
</div>
<div>
<h4>Lokacija</h4>
<ul>
<li>Oslobođenja 32c, Rumenka</li>
</ul>
</div>
</div>