0

I'm trying to display the image to the left and text to the right of the image, I have a li this is defined like:

<div class="row color-accent-1">
      <ul style="display: flex; list-style-type: none;">
        <li style="flex-grow:1;">
            <img src="https://w1.pngwing.com/pngs/546/859/png-transparent-food-icon-delivery-icon-sushi-pizza-delivery-scooter-courier-food-delivery-text-thumbnail.png">
            <div class="content">
              <h2 class="title" style="font-size: 13px; letter-spacing: 1.1px;">
                FREE DELIVERY
              </h2>
              <p class="paragraph" style="font-size: 13px; letter-spacing: 1.1px;">
                On all UK orders over £50
              </p>
            </div>
          </li>
    </ul>
</div>

However, this is displaying like this:

enter image description here

KTOV
  • 559
  • 3
  • 14
  • 39

1 Answers1

2

You just need to make the <li> a flex box by adding the style display: flex.

<div class="row color-accent-1">
      <ul style="display: flex; list-style-type: none;">
        <li style="display: flex; flex-grow: 1;">
            <img src="https://w1.pngwing.com/pngs/546/859/png-transparent-food-icon-delivery-icon-sushi-pizza-delivery-scooter-courier-food-delivery-text-thumbnail.png">
            <div class="content">
              <h2 class="title" style="font-size: 13px; letter-spacing: 1.1px;">
                FREE DELIVERY
              </h2>
              <p class="paragraph" style="font-size: 13px; letter-spacing: 1.1px;">
                On all UK orders over £50
              </p>
            </div>
          </li>
    </ul>
</div>

As a side note: You shouldn't have inline styles in your HTML, since you'll repeat yourself quite a lot, which will make your code hard to maintain and obviously much harder to read. Use CSS classes instead. Also if you give the class names some thought you can add some meaning to the styles.

Mushroomator
  • 6,516
  • 1
  • 10
  • 27