In this tweak of the week we show you how to have a fixed width Divi Page in Desktop, but then make your site go back to a full width when you are in tablet and mobile modes.

This is a really great use of screen space and good for mobile usability. We have made it really simple to do by adding a video screencast, having step by step instructions AND making sure you can just paste in the code.

We recommend using a child theme to get started with this effect, as it is the best way to make tweaks to your code.

Let’s get started.

Watch the  video screen cast on youtube here.

Step 1: Open your WordPress website and go to the admin area. This is the domain/wp-admin location.

Step 2: Open your child theme editing page:
In the sidebar this is under themes > editor

Step 3: You should have a style.css file that can be edited.

Step 4: Open that file for editing. To do this you just click on the file.

Step 5: Paste in the code provided here:

Step 6: Save the file.

You are all done and ready to go.

You can also paste the code if you aren’t using a child theme in the Divi > Theme Options area using the custom CSS area as shown in the video.

This is our first tweak of the week.

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation