Media Query & Flexbox Issue

[Alanna 🥀🖤]

sinnerstouch.boards.net/thread/117

So I'm using media queries and flex box to make my forum responsive. I am also using them for my posting templates so they are still legible on mobile. HOWEVER, I am having an issue with one specific template in particular and I cannot for the life of me figure out why (maybe I'm overlooking the obvious?) 

It works perfectly on desktop and switched from side to side to stacked when I shrink my browser, however, on my phone... it doesn't. Any ideas?

[elli]

Is this iOS Safari or Chrome?

Also, are you using vendor prefixes? All versions of Safari and iOS Safari still require vendor prefixes for flexbox.

autoprefixer.github.io/

[Alanna 🥀🖤]

Chrome. So far everything works on all browsers without vendor prefixes. JK, I lied. BUT- all the other templates work find on my mobile, this is the only one that doesn't.

[Alanna 🥀🖤]

I added display: -webkit-box; display: -ms-flexbox; to all of my CSS where I had display: flex; but it broke the structure... so I removed it:

SPOILER: Click to show

[Former Member]

Flexbox is not designed to work inside tables because they use a automatic table layout

[Alanna 🥀🖤]

It's not inside a table and again I repeat that it IS working with other templates, just not this one.

[Former Member]

It is inside a table, check your source.

The browsers are not the problem, the user-agent is the problem.

I use "foundation-flex-grid" and have never run into this problem, even with
nested "rows"

proboards uses nested views(templates) and sometimes the parent will wrap the child view in a table, just something to watch out for.

[Alanna 🥀🖤]

I don't see how the table could be an issue as this is the only template out of my five that is not working properly.

[Alanna 🥀🖤]

As you can see, this one, which is basically the same exact code, works: sinnerstouch.boards.net/thread/6/wie-gehts

[Former Member]

I can't replicate the issue on any "web" page. The site looks fine in most browsers, but mobile chrome(user-agent) as you say is causing issues, and that was the only thing I could think of.

[Alanna 🥀🖤]

Well hopefully someone who has a mobile device can assist me instead then.

Note that I am not using chrome on my mobile, I'm using safari. And all the templates but the one I am referring to work on it as well so browsers should not matter.

[Former Member]

No worries, sorry I couldn't be more helpful

[elli]

@khristian Wait, I thought you said your mobile browser was Chrome?

[Alanna 🥀🖤]

Jan 21, 2017 17:14:26 GMT -8 elli said:

@khristian Wait, I thought you said your mobile browser was Chrome?

No.

[elli]

Jan 27, 2017 17:07:03 GMT -8 @khristian said:

Jan 21, 2017 17:14:26 GMT -8 elli said:

@khristian Wait, I thought you said your mobile browser was Chrome?

No.

Jan 20, 2017 14:57:50 GMT -8 @khristian said:

Chrome. So far everything works on all browsers without vendor prefixes. JK, I lied. BUT- all the other templates work find on my mobile, this is the only one that doesn't.

I'm confused.