CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Manu Masson
Manu Masson

Reputation: 1747

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 :)

Upvotes: 0

Views: 41

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

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

Upvotes: 2

Related Questions