Manu Manu - 1 year ago 59
HTML Question

Position image above or below text relatively.

This is a pretty absurd question but has been bugging me for a while now. I am designing this website and I am just finishing off on the responsive/mobile view. Currently it looks okay but that's because I delete the images with

display : none:
when the view port becomes too small for the image to look good. (Can bee seen at

The images I want to change are the book (under the book section) and the parrot (under the social section) If I were to not delete them they would just go over the text / embedded post I have and block the content. What I want to happen is that the book image goes above the text centered perfectly. I have fiddled around with the styles of these images but never been able to figure it out.

I hope you guys can figure it out! Thanks :)

Answer Source

You've already set a flexbox parent on the <section id="about">, so we can play with the direction and ordering of the children.

@media (max-width: 1065px) {
  #about {
    flex-direction: column; /* stack the children */

  .leila-book-img {
    display: none; <-- remove
    margin: 0 auto;
    order: 2; /* put the image container after the text */

  .about-content {
    padding-bottom: 1em;

enter image description here