Columns are not shown in mobile

The columns are all visible in the mobile view, but probably in an order you don’t expect here. To change that you would have to change the output in the HTML code, which is the responsibility of the PageBuilder you are using.

Since you are using WP Bakery, the best thing to do would be to contact their support if you have any questions: https://support.wpbakery.com – since this is a commercial product, they can’t help you here on the forum.

There are many alternatives to WP Bakery. However, switching to something else after the fact is nearly impossible. So my advice would be to try WP Bakery support first.

If the columns in your website or web application are not being displayed properly on mobile devices, there are several potential reasons and solutions to consider:

1. Responsive Design: Ensure that your website or application is designed to be responsive, meaning it adapts to different screen sizes and devices. This is typically achieved using CSS media queries to adjust the layout based on the screen width. Check if your CSS includes appropriate media query rules for mobile devices.
2. CSS Framework: If you are using a CSS framework like Bootstrap, Foundation, or Materialize, make sure you are using the correct classes and components designed for mobile responsiveness. These frameworks often provide pre-built grid systems and components that automatically adjust to different screen sizes.
3. Column Widths: Verify that the column widths are appropriate for mobile devices. If you are using fixed-width columns, they might not fit within smaller screens. Consider using percentage-based column widths or CSS flexbox/grid to ensure they adjust according to the screen size.
4. Visibility Classes: Some CSS frameworks provide visibility classes like d-none and d-md-block to show or hide elements on different screen sizes. Ensure that you are using these classes correctly to display or hide columns based on the device.
5. Overflow: Check for any CSS rules that may be causing content overflow on mobile screens, which could lead to columns being hidden or truncated. Setting overflow: hidden on container elements might hide parts of your content.
6. JavaScript and DOM Manipulation: Ensure that any JavaScript code or DOM manipulation you have applied to the columns doesn’t interfere with their visibility on mobile devices. Test your site with JavaScript disabled to check if it’s causing the issue.
7. Viewport Meta Tag: Make sure your HTML includes a viewport meta tag to control how the website is displayed on mobile devices. The viewport tag helps the browser understand how to scale and size the content to fit the screen properly.
8. Testing: Always test your website or application on various mobile devices and screen sizes to identify and address any responsive design issues.

Remember to use the browser’s developer tools to inspect elements, apply different screen sizes, and debug any issues you encounter. By following these steps, you should be able to diagnose and resolve the problem of columns not showing correctly on mobile devices.