0

My website has 2 languages, English and Arabic. Arabic language is rtl (right to left). On my PC it works fine but when using mobile phone or resize the browser there is wrong order for elements (the left element at the top and the right element at bottom) look at numbers 1111111,22222222,33333333 and 44444444: http://food.yesrtl.com/index.php/ar/

  • SP PAGE BUILDER Version 1.0.5

closed as too broad by Lodder, Farahmand, Dmitry Rekun, fruppel, Rene Korss Oct 2 '15 at 7:11

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • This is something you need to contact the developer about – Lodder Sep 29 '15 at 15:18
1

That's an interesting problem, because most templates will stack modules just like that, placing the left module at the top, which of course doesn't make sense for rtl languages.

This happens because the elements are set to float:left. My guess is that you've sorted your modules in the Joomla module manager in this order:

4444
3333
2222
1111

Try reversing the order (1-2-3-4), then add this code to your CSS file, but only for the Arabic language:

@media (min-width: 768px) {
    .sppb-section .sppb-col-sm-3 {
        float: right;
    }
}

Your modules should be properly displayed for all screen sizes.

Another option would be to create two sets of modules, one for horizontal display and another for vertical (mobile) display. Then use CSS and media queries to display/hide the modules as needed. Using Helix3, you can add module suffix hidden-xs to hide the module on mobiles, and visible-xs to show on mobiles only.

Not the answer you're looking for? Browse other questions tagged or ask your own question.