Question 30087 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I make this piece of code work with flex container? – WordPress

I’m sorry I don’t even know how to ask my question, but basically, I need the title to be above the paragraph and the logo to be on the left side.

Picture for reference

#container {
  display: flex;
  align-items: center;
}

#container p {
  margin-left: 1em;
}

#container h4 {}


}
<div id='container'>
  <img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
  <h4>
    Placeholder Title
  </h4>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>
Tags:

5

Answers


  1. 0

    I got your doubt. Basically flex works on direct child. So according to your picture reference, there are two columns, so you have to wrap h4 and p tag with a div, this makes container with 2 childs and you will get the desired result.

    Login or Signup to reply.
  2. 0

    It will not work with Flexbox as you cant change the flex-direction after an element within the same container. As you need to control 2 directions within the same container with your markup you have to use CSS-Grid

    #container {
  display: grid;
  grid-template-columns: min-content auto;
}

#container img {
  grid-row: 1 / -1;
}

#container :not(img) {
  grid-column: 2 / -1;
}
    <div id='container'>
  <img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
  <h4>
    Placeholder Title
  </h4>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
</div>
    Login or Signup to reply.
  3. 0

    First alternative

    Hi! Have you tried using the propety float? Because using the value "left" in this property makes the image go to the left side of the document.

    However, it doesn’t work if the image element is inside a parent whose display is flex so you have to put the image before the container. Here is a code snippet:

    #container {
   display: flex;
   align-items: center;
   flex-direction: column;
}

#container p {
   margin-left: 1em;
}

#cat {
   float: left;
}
    <img id="cat" src="http://placekitten.com/100/100" alt="image" width="50" height="50">

<div id='container'>
  
   <h4>Placeholder Title</h4>
  
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>

</div>

    Second alternative

    You can also use a separated div which includes the paragraph and the image and set its display to flex.

    #container {
   display: flex;
   align-items: center;
   flex-direction: column;
}

#container p {
   margin-left: 1em;
}

#container div {
   display: flex;
}
    <div id='container'>
  
   <h4>Placeholder Title</h4>
   
   <div>

     <img id="cat" src="http://placekitten.com/100/100" alt="image" width="50" height="50">

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>

   </div>

</div>

    And there you are! I hope this helps!

    Login or Signup to reply.
  4. 0

    If you do not have access to the HTML and thus can’t create another container, @tacoshys answer is right – you can’t make this two-dimensional layout without grid. Flexbox is for one-dimensional layouts. You can, however, wrap your text inside another container, and then use the flexlayout to control the text-container and img.

    /* Border box and resetting margin, specifically for p-element */
* {
  box-sizing: border-box;
  margin: 0;
}

/* Default direction is row */
#container {
  display: flex;
}

/* Setting direction to column */
.text-container {
  display: flex;
  flex-direction: column;
  margin-left: 1em;
}
    <div id='container'>
  <img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
  <div class="text-container">
    <h4>
      Placeholder Title
    </h4>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
  </div>
</div>
    Login or Signup to reply.
  5. 0

    This should definitely work: I did an example on codepen if you need: https://codepen.io/olusegunadex/pen/abqyGaW

    for the CSS;

        #container {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

#containerbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

#container p {
  margin-left: 1em;
}

#container h4 {}

    For the HTML:

        <div id='container'>
  <h4>
    Placeholder Title
  </h4>

  <div id="containerbox">
    <img src="http://placekitten.com/100/100" alt="image" width="50" height="50">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis, arcu in tempus tempor, odio velit vehicula erat, sed facilisis sem enim at sapien. </p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search