Flex Messes  With Horizontal Positioning

APD Toronto
APD Toronto used Ask the Experts™
on
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
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Web Applications Developer
Commented:
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>

Open in new window


and

.imgAddOnWrapper {
min-width:150px;
}

Open in new window

APD TorontoSoftware Developer

Author

Commented:
Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial