Html Question posted in
Some basic documentation can be found here.

Html – 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

Tags:

2

Answers


  1. 0

    if you wanna use flex dispaly you must wrap all of your code in flex with an row direction -> flex-direction: row; , then in right div place your image , in left div set flex-direction: column and write other code like your text or etc… , and set flex :1 to those to get same width

    small exmaple:

      <div style={{display : 'flex' , flexDirection: 'row'}}>
                  <div style={{display : 'flex',flex :1 , flexDirection : 'column' }}>
                    {/* your text here  
                    <p>txt 1</p>
                    <p>txt 2</p> */}

                  </div>
                  <div style={{flex :1, display : 'flex'}} >
                    {/* your image here  
                    <img src=""/> */}

                  </div>
              </div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search