Flex Messes With Horizontal Positioning

APD Toronto used Ask the Experts™

on 2017-04-04

Hello Experts,

If you open http://aces-project.com/2017/website-add-ons.php on a narrower browser window, like 430px (mobile view), you will see that the texts right of the images is misaligned vertically. This happened as soon as I added position: flex; on line 9 of pages-mobile.css

The reason why I am adding flex is in order to vertically center the .imgAddon with .divAddonInfo. However, you will see that I am specify a width of 150px to .imgAddon, which should keep everything aligned.

Any help will be greatly appreciated.

Comment

Watch Question

Do more with

EXPERT OFFICE^® is a registered trademark of EXPERTS EXCHANGE^®

View Solution Only

James RodgersWeb Applications Developer

Verified Expert

Commented: 2017-04-05

there are a couple of things you can do to correct this

in the general css you have

* {
    font-family: Calibri, Verdana, Tahoma;
    font-size: 12pt;
    overflow-x: hidden; 
}

Open in new window

removing overflow-x: hidden; solves the issue, but not sure how this affects other items so you might want to just override it for the appropriate divs

or, for

.imgAddon {
    width: 150px;
    float: left;
    margin-right: 10px;
}

Open in new window

add min-width:150px

OR

add a div wrapper around the image and give the div wrapper a min-width of 150px

<div class="divAddon">
        <div class="imgAddOnWrapper">
        <img class="imgAddon" src="http://aces-project.com/2017/images/additional_page.jpg" alt="Additional Pages">
  		</div>
        <div class="divAddonInfo">
            
            <h2>Additional Pages</h2>
            <p class="addedPrice">
                $120.00 / page            </p>

            <p class="addedDesc">
               All Website Design packages include up to 5 pages. 
            </p>
            
        </div>        
    </div>