Categories View page not displaying on Pad Air 2

[geppogiappo]

Hello everyone,

I have a page with backend "Phoca Cart » Categories View (Category list layout - default view)"

Everywhere this page is working fine (desktop, mobile, android tablet), except with iOS 10 Pad Air 2.
It seems table layout is KO, or something similar.

The following is a screenshot http://www.cucinaespressa.it/category_list_error.png of the bad layout.

The web site is www.cucinaespressa.it and the menù entry is "ORDINA->Categorie menù"

Anyone can please help me troubleshooting the problem? I tryed everything....

Thank you very much!!

Alex

[Jan]

Hi, which browser does the iOS 10 Pad Air 2 use? Does it use some standard browser? The output of Phoca Cart is stylized by Bootstrap and standard CSS methods, so hard to say what can be wrong in such browser (maybe not implemented all the standard CSS methods)


Jan

[geppogiappo]

Ji Jan,

the browser is iOS 10.1.1 default browser.

Thank you very much for your precious help.

Alex

[Jan]

Hi, unfortunately, I have no option to test it so hard to say , is this standard browser? Does it include new feautures like flexbox?

Jan

[geppogiappo]

Hi, unfortunately, I have no option to test it so hard to say :-(, is this standard browser? Does it include new feautures like flexbox? :idea:

Jan

Hi Jan, thank you very much for your kind help. I'll try to investigate :-)

Alex

[Jan]

Ok

[geppogiappo]

Hi everyone,

the same behaviour is shown while using IE11.
http://www.cucinaespressa.it/ie_11.png

I tried to save the page locally and then I opened it with Firefox and with Chrome. The page is here showed fine, so I suppose (we're sure :P ) the issue is on the browser (IE ad Safari) not inside code.....

Alex.

[christine]

Hi Alex,

About Safari, I don't know. In generell I'am using Firefox. But I tried out with IE.

In the /main.css, line 1591/1592
.row-flex.grid .row-item .ph-item-box,
.row-flex.grid .row-item .ph-item-box .ph-thumbnail-c {
display: flex;
flex: 1 1 100%;
flex-direction: column;
}
when (temporary) removing (or comment out) the blue lines, then it looks ok. I don't know why IE doesn't like it

Kind regards
Christine

[Jan]

Hi, yes, it seems like non standard browser have problems with flebox CSS rules IE11 is 5 yeard old browser, so maybe it should updated


FYI: Flexbox is important to have the items aligned in the same row, for example bottom buttons - in case two products have different height of box, the box will get the same height and the bottom items of all the boxes will be aligned in the same row:



Jan

[geppogiappo]

Hi Alex,

About Safari, I don't know. In generell I'am using Firefox. But I tried out with IE.

In the /main.css, line 1591/1592
.row-flex.grid .row-item .ph-item-box,
.row-flex.grid .row-item .ph-item-box .ph-thumbnail-c {
display: flex;
flex: 1 1 100%;
flex-direction: column;
}
when (temporary) removing (or comment out) the blue lines, then it looks ok. I don't know why IE doesn't like it

Kind regards
Christine

Hi Christine,

you always wonderfully solve all my problems

I commented both lines and now everything seems to works fine (in IE and, I suppose, in Safari browser)

Thank you very much for your patience.


Kind Regards,

Alex