Width, calc, and flex

[bobbybosler]

Greetings,

One of my client’s sites just updated to the newer X theme and we’ve had a few styling issues, which I expected.

However, one of them I have not been able to resolve, and I think it has something to do with flex, which I know nothing about. On this page (http://fallsbaptist.org/series/new-life-meetings-2017/), when the window is 767px or less, my .mejs-time-rail div is not changing width and is therefore overlapping with my buttons, which looks very ugly.

I have a @media query that tells the .mejs-time-rail to change to width: calc(100% - 180px) !important; However, when I change this, nothing happens at all. Any idea what’s going on?

[ruenel]

Hello There,

Thanks for writing in! You cannot change the width of a div that is displayed as flex. This is why it is not following your width code. Please target the next child element instead. You may use this code instead:

span.mejs-time-total.mejs-time-slider {
    max-width: calc(100% - 220px) !important;
}

Please check out this tutorial:

A Complete Guide to Flexbox | CSS-Tricks

[bobbybosler]

Awesome! That did it!! Thanks!

Thanks for the resource as well.

[friech]

You’re more than welcome, glad we could help.

Cheers!