Display image on top on 1/2 + 1/2 view mobile

[bracas]

I’ve tried https://xthemetips.com/swap-columns-mobile/416/ which doesn’t work. Maybe due to that it’s old now and you have updated the theme.

I would like the image to always be on top of the other column on mobile when it’s only 1 column displayed. How do I solve that in the best way with the theme?

[thai]

Hi There,

Please try with this custom CSS instead:

@media (max-width: 768px) {
  .x-section .x-container.swapcolumns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

Don’t forget to add the swapcolumns to your row.

Hope it helps

[bracas]

Didn’t work tried, just swap desktop and then wrong on mobile and doesn’t put the image above the other section.

[nabeel]

Hi again,

It looks like you haven’t added swapcolumns class to the row, make sure you add the swapcolumns class to the row and then add the above CSS in the Theme Options > CSS.

I tested the above code using developer’s tool and it’s working just fine

Hope this helps!

[bracas]

Will answer later

[nabeel]

Sure do let us know if you need any assistance.