Prerequisite Topics

• Page Builder Basics
• Editing Rows, Columns and Modules

With the proliferation of different desktops, laptops, tablets, phones, smart TVs, smart appliances, and other web-enabled devices, users could be viewing your website from screens of any size. To accommodate this, web design had to become more flexible. Design that changes based on screen size is called responsive design. With responsive design, your website will look good no matter the device it's viewed on.

Fortunately, EWU's themes and Page Builder’s modules are already responsive. Even so, it is a good idea to view your website from large, medium, and small devices to see if there are any issues with your pages. Another way to check responsive behavior is to resize your browser window; styles will change as the window size changes.

Since pages are typically designed on laptops or desktops, most issues will appear on mobile-sized screens. For example, columns may not stack the way you expect them to, or customized text may appear too large to be easily read on a phone. There are a few ways you can address issues like these in Module Settings.

If you have a module you want to be visible only on certain screen sizes, you can set that in the Advanced tab under Responsive Layout. Additionally, some modules have a section under the General tab or Style tab called Mobile Structure. Here you can set specific styles for mobile screens.

For more information and solutions for common problems, check out Page Builder’s articles:

• Responsive Behavior in the Beaver Builder Plugin
• Basic Approach to Margins and Padding
• Reverse Column Stacking Order
• Prevent Column Stacking With Custom Widths
• Troubleshooting: How Margin and Padding Values Are Determined