Manu Manu - 6 months ago 6
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
drleilamasson.com/css/responsive.css
)

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

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

Comments