Columns not woring correctly

[eyedia]

Hi There. I recently migrated a site, however a strange issue happened on some pages with some columns.

I have a couple areas that have this format for columns: 1/6 + 2/3 + 1/6
However, it seams that instead, it is creating 3 equil columns

Old site showing it correct: http://eyedialabs.ca/lifestylehearing/about-hearing-healthcare/what-do-i-do-if-i-have-a-hearing-loss/

New site rendering 3 same width columns: http://fe0.15a.myftpupload.com/about-hearing-healthcare/what-do-i-do-if-i-have-a-hearing-loss/

On this page I have columns formated as : 1/4 + 3/4

Old site showing it correct: http://eyedialabs.ca/lifestylehearing/hearing-clinics-aids/hearing-aid-types/

New site rendering 3 same width columns: http://fe0.15a.myftpupload.com/hearing-clinics-aids/hearing-aid-types/

Any ideas why this is happening and how I can fix it? This site is suppose to go live on the weekend so hoping it’s a quick fix. Thank you

[rad]

Hi there,

Thanks for posting in.

It’s because of your flex styling under your child theme’s style.css

The working one is this

#x-section-3 .x-container > .x-column, .x-colophon.top .x-container > .x-column, #post-1972 #x-section-9 .x-container > .x-column {
    height: auto !important;
    float: none;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

The fault one in your migrated site is this

#x-section-3 .x-container > .x-column, .x-colophon.top .x-container > .x-column, #post-1972 #x-section-9 .x-container > .x-column {
    height: auto !important;
    float: none;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex: 1 1 5em;
    flex: 1;
}

Try adding these lines to old site and it will behave the same

    -webkit-flex: 1 1 5em;
    flex: 1;

Thanks!

[eyedia]

Ok interesting. Removing that line did fix hat issue. (i’m assuming you meant remove as the code was there on the migrated site already)

I remember now that I was told to add those extra two lines to solve another issue, you can see my post about that here:

Columns on iPad beaking incorrectly

I had done this quickly to test and had an emergency i had to attend to, so I forgot all about that.

So in the end, that code actually never solved my other issue of those columns breaking which you can see here:

Normal desktop render: https://imgur.com/a/AhSHx
Ipad size: https://imgur.com/a/AhSHx

[friech]

Hi There,

So you need to keep those pricing columns inline in iPad’s portrait and landscape view. If so, please use this custom CSS instead.

@media (min-width: 768px) and (max-width: 1024px) {
	.x-pricing-table.who-member-boxes .x-pricing-column,
	.x-pricing-table.who-member-boxes .x-pricing-column:last-child {
		    width: 33.33333%;
	}
}

Hope it helps,
Cheers!