0

I got this awkward situation I always avoid dealing with..

enter image description here

You can notice the first text column wraps due to the text content being larger than the second text column. Which creates that extra space that misaligns the items.

Here's the HTML:

<section class="featured">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-lg-4">
                    <h3><strong>Work in all areas of Sales & Operations:</strong></h3>
                    <ul>
                        <li>- Delivery Merchandiser</li>
                        <li>- Bulk Merchandiser</li>
                        <li>- Account Developer</li>
                        <li>- Space Management Specialist</li>
                        <li>- Forklift Driver & Warehouse Laborer</li>
                    </ul>
                </div>
                <div class="col-xs-12 col-lg-4">
                    <img src="./logo.png" alt="logo">  
                </div>
                <div class="col-xs-12 col-lg-4">
                    <h3><strong>This role is for you if you:</strong></h3>
                    <ul>
                        <li>- can travel extensively</li>
                        <li>- are highly flexible</li>
                        <li>- are deployable at little notice</li>
                        <li>- can adapt quickly to change</li>
                        <li>- are highly motivated</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <h4 class="text-center"><strong>We offer great rewards, competitive pay, career advancement & growth opportunities</strong></h4>
            </div>
        </div>
    </section>

I'm using bootstrap by the way.

Rodrigo
  • 31
  • 6

1 Answers1

-1

This will prevent a word wrap from happening. It could cause other issues. Setting break points and adjusting font-size might be a better solution.

Breakpoints - Media Queries Documentation

<h3><strong style="white-space: nowrap;">Work in all areas of Sales & Operations:</strong></h3>
Cyberdelic Soup
  • 60
  • 7