Search code examples
htmlcssflexboxcontainers

is there any solution if div container 'display:flex' not working?

It might be my own mistake or carelessness during following a Video tutorial in purpose of learning in youtube where when in the part on the home page content, I want the content of a picture and text to be inline like the tutorial but mine were like this

enter image description here

So I decided to learn about display: flex where we put in the parents Division to flex the two content division inside it How I want it to look like

enter image description here

HTML:

enter image description here

CSS: enter image description here

Solution

  • You should set .main-slide as display:flex and flex direction: row and wrap the content except the image in a div with a class .left-div for example which will be display:block. If the screen width is small they may not align in a row anymore.

    .main-slide {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap-reverse;
  }
  .left-div{
    display:block;
  }
  .main-slide div:nth-child(2){
    display:  flex;
    flex: 1;
    justify-content: center;
    padding-top: 40px;
  }

  .main-slide div:nth-child(1){
    padding-top: 20px;
    flex: 1;
    font-size: 30px;
  }
  .main-slide div:nth-child(1) p{
    padding: 20px 0;

  }

  .main-slide div:nth-child(1) span{
    color: red;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-color: blue;
  }
    <div class="home">
  <div class="main-slide">
    <div class="left-div">
      <h1>enjoy<span>delicious food</span>in your healthy life</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Pariatur, esse autem ducimus explicabo consectetur nam temporibus voluptatem quia obcaecatinisi
        rerum sunt dolorem dicta harum eum eveniet ipsam quam natus?
      </p>
      <button class="red-btn">Visit now <span>&#8594;</span></button>
    </div>
    <div class="right-div">
      <img src="https://m.media-amazon.com/images/I/71pqfvJKW5L.__AC_SX300_SY300_QL70_FMwebp_.jpg" alt="">
    </div>
  </div>
</div>