How Do I Create a Mobile Version of My FLEX website?

For the most part, WordPress and WPBakery (what we use to create and edit our Flex2-themed sites) are mobile-ready right out of the box. You will need to test every page on your site in a mobile browser to make sure that everything is laid out properly and flows as you need it to in case some small tweaking of elements needs to be done.

There are a few elements that will need to be altered a bit so that the information presented in them in a full desktop window can still be viewed properly in mobile format. For example, Slider Revolution slides are very large, and take too long to load on mobile devices. And some of our themed sliders do not translate well to mobile format. In order to create a mobile version of your website that displays a similar image and all the same text provided in the slider but with just a simple single image and headline with text, you will need to create a row for both the slider and then one that contains a single image (preferably the same one used in the slider) and then a headline and text element featuring all the same information that was in the slider.

Next, click on the following button for the slider's column editor: 

Third, click on the tab that says Responsive Options. Finally, make sure that this column -- the one we want to show up on desktop screens -- is only hidden on the bottom two screen options (tablet portrait, and mobile). Save your changes.

After that, do not forget to go back to the columns that you set up for mobile use and disable it from showing up on  desktop and tablet landscape screens. You don't want two copies of your site on a user's cell phone. 

This is also a handy way to make large tab sections or accordions appear in more bite-sized quantities of info on mobile devices.  In this case you would create the tabs or accordion for your desktop (making sure that all the information is correct), then DUPLICATE the entire row that the element sits in.  Then you would make the first tab or accordion column hidden on tablet portrait and mobile mode, and in the second tab or accordion column (the one meant for mobile), you would hide it on desktop and tablet landscape, as well as edit the tab or accordion section and change the ACTIVE SECTIONS to "0".  

This makes sure that when a tab section or accordion appears on a mobile device, no section is open upon page load, so that the user can view ALL THE OPTIONS without having to scroll at first. Since a desktop screen has a lot more room and displays these elements differently, it is preferred to have one active section open for it.

Need to add information from commit best practices and on reversing columns.

Feedback and Knowledge Base