Swap flex-direction: row to flex-direction: column on SM

[tomr96]

Hi there,

I am trying to use CSS to change an element from Row to Column when on screen sixe below MD (766px).

I have tried searching around here and using Inspector, however have got this together, yet nothing seems to be working.

I am wanting to change this on a Headline Element with the class: SM-row-to-column

I have tried each of the below and neither have worked.

@media (max-width: 766px){
  .SM-row-to-column {
    flex-direction: column !important;
}
}

and

@media (max-width: 766px){
    .SM-row-to-column {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

and

@media (max-width: 766px){
  .SM-row-to-column {
    display: flex;
    flex-direction: column !important;
}
}

You help would be much appreciated.

Thanks, Tom.

[christian]

Hey Tom,

I’m sorry but we cannot help fixing custom CSS. I’d just recommend that you use the Element CSS like in the quick screencast below showing changing the Flex setup o the column from Row to Column.

2021 01 12 18h24 35

The code used there is this:

@media (max-width: 766px) {
  $el.x-col {
    flex-direction: column;
  }
}

You can use that as a template but remember that it’s only provided as an example. If you need more CSS or need help fixing your custom CSS, please consult with a developer.

Hope that helps and thank you for understanding.

[tomr96]

Thanks for this,

Unfortuantly that code didn’t work on the Headline Element.

Thanks.

[christian]

Hey Tom,

That sample code, as I’ve said, is for the Column element. You see that it works in the video.

Please consult with a developer if you wish to use custom code to achieve or extend what’s offered in the builders.

Thanks.

[tomr96]

Thanks @christian.

I have managed to sort this with another focus session.

I have used the below code should anyone need to turn the Headline Element from Row to Column when going to a screen smaller than 766px (or below the SM screen break in my case).

My class on the Headline Element is SM-row-to-column.

@media (max-width: 766px) {
  .SM-row-to-column.x-text .x-text-content {
    flex-direction: column !important;
}

Thanks, Tom.

[kory]

Thanks for sharing, @tomr96! Glad you’ve got everything sorted out.