Flex Direction Not Working

[gregorylmartin]

Hey, I have a few rows on one of my pages that I need the flex direction reversed for on mobile.

I have CSS for it, and it looks like it works when I do an inspect on Chrome, but when I got to the page on my phone it doesn’t work .

Can anybody help me with this?

The page is located at hotsocialclub.com/membership

Let me know if you need login credentials and I can give those to you as well.

I need the Being a Member and the Hourly Fee rows reversed on mobile so the icons show above the headlines.

Here is the CSS I am using (same CSS for two of the rows):

@media only screen and (max-width: 480px) {
  .e38-21 > .x-row-inner {
    flex-direction: column-reverse !important;
/*     -webkit-flex-direction: column-reverse !important;  */
   }
}

[christian]

Hey @gregorylmartin,

Upon checking, the icons are already above the headlines. Please clear your browser’s cache and also check in incognito mode.

Thanks.

[gregorylmartin]

I have cleared my cache.

I am testing this on an iPhone 8 plus and it is not working.

Like I said, it works when I do an inspect and change it to mobile mode on my desktop.

But when I pull out an actual phone and try it, it doesn’t seem to work.

Can you see that or no?

Thanks for the quick reply.

[gregorylmartin]

It works great on my buddy’s samsung andriod phone.

It’s just not working on my iPhone 8 Plus and I don’t know why.

An interesting problem I’m struggling with so I thought I’d reach out.

Thanks again!

[prakash_s]

Hello @gregorylmartin

Please add this code in place of previous code under X/Pro—>Theme Option -->CSS.

@media only screen and (max-width: 480px){
.e38-21 > .x-row-inner {
flex-direction: column;
}
.e38-21 > .x-row-inner  .e38-22{
order:2;
}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks