How to Make Divi Responsive (Easy Methods!)

Learn how to make Divi Responsive in this tutorial, using various methods in the Divi Builder and Device options!
You can easily create a responsive design in Divi and make make Divi mobile responsive for all devices. There's some basic options and other areas you may into know about, that we explore in this video!
This tutorial is designed to help you customize your WordPress website easily with great results. Just note that some of the links below are affiliate links I earn commission from:
// DOWNLOAD DIVI:
creatorimpact....
// FULL IN DEPTH DIVI TUTORIAL PLAYLIST (build a website, step by step):
• DIVI THEME - How to Ma...
-- ⚒ // TOOLS // ⚒ --
The following are the tools I use and highly recommend. Some of these are affiliate links I earn a commission from, but this is what I use and swear by!
📺 USED FOR MY VIDEOS:
🔴 Camtasia (screen recording): creatorimpact....
📷 Camera - Canon Rebel T7i: amzn.to/3Qzsi28
🎙 Nicama Lavalier Mic: amzn.to/3BR5OW3
🎙 Audio-Technica Mic: amzn.to/3PivRbH
🖥 WEBSITE / WORDPRESS BLOGGING
🌍 WebHosting Siteground:creatorimpact....
🔥 Divi WordPress Theme: creatorimpact....
⚙ All in One SEO Premium Plugin: creatorimpact....
📩 EMAIL NEWSLETTER:
📈ConvertKit: creatorimpact....
😍 DESIGN & PHOTO EDITING:
👁 Adobe Photoshop: creatorimpact....
👁 Canva: creatorimpact....
👁 Penji Graphic Design Service: creatorimpact....
🔸 FREE KZbin Thumbnails PSDs: creatorimpact....
🔥 PREMIUM KZbin Thumbnails PSDs: creatorimpact....
🔸 FREE Facebook Cover Images PSDs: creatorimpact....
🔥 PREMIUM Facebook Cover Images PSDs: creatorimpact....
FREE PHOTOS:
🔸 Unsplash: unsplash.com/
🔸 Pexels: www.pexels.com/
// LEARN MORE
🔗BEGINNER COURSE
Build a website, set up your presence online and start earning money:
creatorimpact....
// CREATOR IMPACT
🤘 Follow Creator Impact on Social Media!
🔗 Facebook: / creatorimpact
🔗 Instagram: / creatorimpact
🔗 Twitter: / creatorimpact
This Divi theme tutorial is for beginners and is a part of our series showcasing how to make a WordPress website with Divi - an in-depth series of WordPress tutorials showing you how to make a Divi website by breaking down the individual areas and walking through how they work, step by step. We show you how to use this powerful theme in a number of ways!
We cover:
- Designing your base template (using the customizer or the theme builder)
- A beginner Divi visual builder tutorial
- How basic design options and modules work
- a variety of page layouts you can build and download.
The theme used here is called Divi (Elegant Themes top WordPress Theme). It is a complete and comprehensive WordPress page builder along with a site-wide editor known as the Divi theme builder.
// LEARN MORE
Our Full Divi Theme Playlist:
• Divi 4.0- The Top Cust...
Exploring the Full Width Header Module:
• Exploring Divi Theme F...
How to set up a Divi Full Width Slider:
• How to use the Divi Fu...
Exploring all Divi Builder Modules:
• Exploring all of the M...
For my Free Beginners Email Course:
creatorimpact....
Learn how to get your business or blog online, reaching more people and making more money!

[@danatavares2038]

Thanks much. This is the answer to the main issues I’ve been having regarding responsiveness that’s been bringing me nuts for several days.

[@WadeMcMaster]

Awesome, I'm so glad to hear it! Thank you :)

[@HyperiaXD]

Good video :) I hope you get more views and subscribers cause you deserve it!

[@WadeMcMaster]

Thank you very much for the compliment! Im glad you liked the video :)

[@AndreaOpYoutube1992]

Thanks! This gave me hope

[@WadeMcMaster]

Thank you, im glad it was helpful :)

[@tamunotonyespencer922]

Thanks for the video... Very helpful

[@WadeMcMaster]

No problem, thanks for watching the video!

[@sonchoydas]

Your videos are fantastic! keep up the good work, mate!

[@WadeMcMaster]

Thank you Sonchoy! Always uplifting feedback. Have a great day mate!

[@WadeMcMaster]

Thank you Sonchoy! Always uplifting feedback. Have a great day mate!

[@ganesha123100]

Nice video, thanks

[@WadeMcMaster]

No problem, thank you for checking it out!

[@user-mn5ug8hi4l]

hello can you help with the module misplacing in mobile mode how to edit that interface ? in DIVI builder

[@WadeMcMaster]

Sorry Im not sure what you mean, what exactly is happening?

[@enricoianniello5611]

if i got some code on the page can i use @media screen and (min-width:...) { classes } in css? changing the min-width if i'm working on tablet or phone....

[@WadeMcMaster]

Undortunately Not in a modules css area, you can change from.desktop to tablet to phone for each field though. Otherwise id go.up and add a class or id, the go to the custom css in the theme customizer itself. Hope that helps! :)

[@thewillage]

Thanks for the great explaination. I am having an issue when I disable a row module for desktop and I remove the 50% view of disabled view of the row. There is still a gap where the disabled module was. And that throws off my ability to acurrately design the page with those clear gaps of the disabled module. Boy I hope that made sense. Please help if you can. Thanks

[@WadeMcMaster]

Thats annoying. Is it alone in a section? If you can disable the whole swction that could work. Otherwise, there may be some padding or margins in surrounding elements that may need adjusting for different device settings. I hope that helps!

[@raepascual2168]

Hello! Great video :D I usually edit Mobile responsiveness inside Divi builder but with the website that I'm doing now, the mobile edits affect the desktop version. :/

[@WadeMcMaster]

Man thats really odd? Is everything been updated to the latest version? That shoildnt happen :(

[@chantal3101]

This is happening to me too 😢

[@DoDeH1]

Hi... On 11:39 when you switch between desktop/tablet/phone mode how did you do the picture to shrink? I mean even while you are expanding the view with the mouse the picture reveals more.... I would apreciate the help.

[@WadeMcMaster]

They're 2 different pictures. Under the background settings I hit the phone icon, and under tablet and phone I uploaded a different image so it switched it. If the background image is set to 'cover' in the underneath settings it also crops depending on the size of the area it is in, so by expanding it reveals more of the image it cropped in order to fit. Does that make sense?

[@DoDeH1]

@@WadeMcMaster Hi... Thank you... I get it but there's one problem I have now... The landscape mode on phone... It stretches the image. How to make it trigger the desktop image since it's a 16:9 ratio?

[@WadeMcMaster]

@@DoDeH1 Oh I'm not sure if a simple way to do that. That's getting pretty custom and would require some CSS code. Are you familiar with CSS in any way? Otherwise, it may not be possible with Divi's out of the box features.