How To Change Display Size In WordPress Using Oxygen Builder?

How To Create Mobile Responsive Screen Sizes Using Oxygen Builder
Creating a mobile responsive screen size using Oxygen Builder

How To Optimize Display Size Using Oxygen Builder?

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.

How To Customize WordPress Display Resolution Automatically 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.

1. Select the section of choice

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.

Select the section you want to optimize the display size
Click on the section and you will see the option on the left side of the screen

If done correctly, you will see Section (#code) on the left setting.

2. Select the display size

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 customize the display sizes based on the device size
Oxygen Builder allows you to customize the display sizes based on the device size

Oxygen Builder allows you to optimize the display sizes in WordPress with five major display setup:

  • All devices
  • Page containers (1120px) and above
  • Less than 992px
  • Less than 768px
  • Less than 480px

This is how it looks like with you select Less than 768px as the viewport.

Mobile Display Setup On Oxygen Builder
Oxygen Builder automatically adjust the display size based on the viewport
Important Note: If you had successfully setup the custom dimentions, padding or margin, you will see the categories being highlighted in blue colour.

3. Optimize the display size in WordPress

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.

What display size values do we use at WP Maven?

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:

  • Less than 480px: 5px for both left and right of the container padding
  • Less than 768px: 50px for both left and right of the container padding
  • Less than 992px: 50px for both left and right of the container padding
  • Page container (1120px) and below: 138px for both left and right of the container padding
  • All devices: 138px for both left and right of the container padding

These values work best for us and we recommend you to test before implementing on your production site.

Summary: How to change display size in WordPress using Oxygen Builder?

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!

  • Build Your Website with Namecheap - Get Privacy Protection Free Forever

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related WordPress Tutorials

February 17, 2020
How To Improve WordPress Site Health Score?

Is the WordPress site health showing you an urgent error and rectifications required? This guide explains how to improve WordPress site health score.

Read More
February 16, 2020
5 Best Popup Plugins For WordPress To Build An Email List

Want to build an email list? Here are the top 5 and best popup plugins for WordPress websites. These are free and paid popup WordPress plugins for beginners.

Read More
February 15, 2020
How To Create Popup In Oxygen Builder?

If you are using Oxygen Builder, you might be wondering how to create popup in Oxygen Builder. This tutorial shows you exactly how to create a popup using Modal element.

Read More
February 14, 2020
Perfect Blog Post Template: 12 Steps To Create The Best Blog Post Layout

What is a perfect blog post template? WP Maven shares with you our custom blog post template that we use for our own website and company blog.

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram