Although we optimize all of our temples on Commkit for mobile, sometimes, you might need to add to or modify elements within a template. For the most part, WPBakery sections, rows and features are responsive. However, there are times when you may want to adjust the layout to simplify or change behavior on mobile.

Below are guidelines and considerations for how to best ensure the mobile experience.

• Use text blocks, not heading elements for paragraph text without headings included. Use of the heading elements for paragraphs adds code, causing the application to do more work and makes front end editing more difficult as how to edit the text is not immediately apparent.

• Use the capability to set different font sizes for different breakpoints in the Ultimate Heading element if you need to change the size of a heading or subheading on a tablet or mobile.
• Use the built-in ultimate spacer element or percentage padding to set different spacing at desktop, tablet and mobile rather than hard-coding pixels into a row or column.
• Use the built-in capabilities to hide/show elements at different breakpoints to position part of a section in a different location on mobile vs. desktop rather than duplicating the whole section.

• Use the capabilities to change the size of columns between desktop and mobile rather than duplicating.

• Use custom CSS when there is a minor difference in spacing. For example, to turn on/off or change borders or hide a background image between desktop and mobile.
• Be careful of using different techniques to load the same image on a page - this can cause very low page speed scores.
• Always test your pages on laptop and mobile screens. Most users don't work on large design monitors.