How to position this
    under

    ?

.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: click

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>

Leave a Reply

Your email address will not be published. Required fields are marked *