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.

Get access to all our themes and plugins

Trusted by over 1000+ websites

Become a member to use our themes & plugins for an unlimited number of sites. No restrictions!

30-day money-back guarantee.

Not satisfied? Your money back, no questions asked.

Share This