Step by step guide to create a mobile responsive display based on the device's size
Do you want to optimize the display size on WordPress when using Oxygen Builder? If the answer is "Yes", you are going to love this quick WordPress tutorial today. We are a strong advocate on Oxygen Builder (read our Oxygen Builder review here) and we believe it is one of the best visual builders for WordPress today.
Oxygen Builder is a WordPress drag and drop builder that allows you to completely customize your site without any limitation—and yes, this includes customizing and optimizing the display size based on the device size.
Follow these steps to easily configure your WordPress display size using Oxygen Builder. For this tutorial, we are using our custom blog template for example. If you want to do the same, head over to WP-Admin » Oxygen » Templates » Create New. The page in use is our WordPress resources page.
You would want to optimize the display resolution on WordPress on the content or body area. Click on the section container to load up the custom setting.
If done correctly, you will see Section (#code) on the left setting.
Next, click on the desktop icon to launch the custom display size. When you do this, Oxygen Builder will automatically change the display (visual builder) for you.
Oxygen Builder allows you to optimize the display sizes in WordPress with five major display setup:
This is how it looks like with you select Less than 768px as the viewport.
Now that you know how to select the different display size viewport, let's start by configuring and optimizing the display size in WordPress.
Step 1: Define the padding/margin size for each viewport.
Step 2: Setup the different padding/margin size and hit the save button.
Step 3: Go Incognito or Private mode to ensure that the setup is right for each viewport.
We can't speak for most WordPress websites because the size varies from one WordPress theme to another. Since we are using Oxygen Builder, we can easily customize everything in just a few clicks.
Here's our setup:
These values work best for us and we recommend you to test before implementing on your production site.
Oxygen Builder makes it really easy to customize different display size in WordPress. Of course, major visual builders for WordPress such as Thrive Architect, Divi Builder and Beaver Builder also allow you to perform such customization based on viewport and device size.
We hope you find this WordPress tutorial useful and leave a comment if you need any assistance!