How to Optimize Divi for Mobile Using the Visual Builder

Full post at joshhall.co/ho...

[@sherrymirshahi-totten9234]

Just found this in 2021 and I'm here to say it's still an incredible video even now. Thank you! This really helped so much!

[@debbiemurdock5544]

Thank you! I just revisited using Divi again after not using it for a few years and I remember now why I was so frustrated with this builder I couldn't figure out how to get my changes to stick when I shifted among views. I didn't want to go in and put in media queries because I just needed to throw together a quick portfolio. Finally was able to make successful edits.

[@niftyg33k]

A bit has changed in the interface since this was made in 2018. Now to get the tablet and mobile settings, you have to hover over the words of the design title (like the Margin title for example) for the phone icon to be visible so you can click it for the other options.

[@sarahernandezcr]

This video is so useful, thank you so much. I was so frustrated with the simultaneous changes for all devices, 4 years later and divi hasnt changed that setting

[@marissaeze]

This helped me understand and better use the visual builder! I have watched a ton of tutorials about divi in the past few weeks and this one is the bees knees.

[@ninaoglesby2133]

Agreed! This video is one of my favorites as well.

[@constantinbudt4055]

Finally a video that doesn't have you buy some builder plugin. Awesome stuff helped a lot!

[@louis7130]

Thank you, Josh! Tried working through DIVI support and you explained what they couldn't in little time. .

[@JoshHallco]

Glad to help, Louis!

[@ThinkAboutItNow]

Without your tutorial here Josh... this Divi theme is a NIGHTMARE! Thanks for the info about it NOT updating in real time when switching from desktop to mobile to phone. Why would they even have those icons at the bottom if they don't work in real time when you update? THANKS JOSH!

[@JoshHallco]

I agree...let's see what Divi 5.0 has in store for us soon!

[@brianthomas8098]

Hi Josh! Just found you in January 2022! This is very helpful, concise, and professional. Well done, young man! Well done!🥇

[@HillyPlays]

So glad I clicked this video first! Great SEO, I was searching for this exact demonstration. I have worked with loads of page builders and divi is AMAZING, but I was stumped on this! It seemed so odd that such an intuitive visual tool would make my designs look like trash on mobile. Turned my bummer into excitement again!

[@jennysjourney02]

Thank you so much, this is one of the best Divi videos I've been able to find. I'm working with a client so I'm new to it and had to learn it quickly.

[@glenwoodfin]

Josh, I almost never use the Divi Visual Builder. Now, you've given me a powerful reason to put it into play. Thanks!

[@mnburch]

Hi Josh. I don't take time like I should to tell you how much I appreciate all the Divi tutorials you produce. I've learned so much from your tutorials and am hoping you will keep them coming! Again, thanks so much!

[@thedojocummingdojo729]

Thank you so much for this tutorial. I just took over our organization's website, and I've never used the Divi builder before. This is so helpful as I'm learning to navigate all the features.

[@lesleythomas5657]

This was seriously the most helpful video, blog post, etc. I've seen yet on this subject! Thank you!

[@RichArtLove]

Hi Josh! - Need to use your/these skills now, but this Very Helpful tut is now nearly 4 years old - and it would be SO COOL if you would revisit this for 2022! Thanks!

[@Clair_FireBird]

My favourite trick learning this was to realise I could create a completely different footer background for mobile devices :D

[@stuartknox1621]

Excellent video. I've recently tried watching other videos to try to understand this better, but I got bored quickly. Your explanations are simpler and straight to the point. I got what I was looking for within a few minutes. Thank you.

[@davidflannery887]

Great Video. I was add different section that only showed desk top or phone. This will help speed things up. Thanks Dave

[@bibekshaw]

Thanks a lot Josh! It's been 3 years but your video is still helpful.

[@witchescrossing]

Hi Josh! I've gotta say...this tutorial is brilliant! Thank you so much for taking the time to create it for everyone who is trying to figure out how to navigate the ins and outs of Divi! I can't tell you how helpful this is! A+ explanation! 👍💯🌟🏆

[@JoshHallco]

Thanks Robyn!

[@witchescrossing]

@@JoshHallco ~ You're so welcome, Josh! 😊

[@hochiminimal2345]

I have watched hours of tuts and have a decent grasp of the builder but this vid really solidified all those hours together. Appreciate it man! :)

[@MacAutomationTips]

Wow, thanks for this video. I was wondering how to do separate settings for the mobile views. Your instructions immediately solved the problem for me. I’m also going to learn some CSS in order to refine the customization more. Definitely subscribing to your site.

[@JoshHallco]

Great to hear! Yeah a good understanding of CSS will be a game changer for you! If you're interested in my course on Divi and CSS, I'd love to help guide you to taking things to the next level. Use promo code CSS30 for $30 off when you're ready to join! joshhall.co/product/divi-css-course/

[@adventurerealty7567]

Josh, your video demonstration was spot on. Very easy to follow and with great detail, thank you.

[@JoshHallco]

Thank you! Glad to hear it helped.

[@PjSmith]

Josh - that is awesome! - Keep up these great tutorials - I'm just learning divi and it seems I can never find videos that are as clear as this is! Thank you!

[@mnburch]

Short but sweet and full of good tips. Thanks!

[@Gozycode-Academy]

Thanks for the cool tricks Josh! I agree the more I used Divi builder the more I love it.

[@chloebanks4214]

This was really helpful, better than others I found at clearly explaining - thank you!

[@PTMarketingUK]

Life Saver! Very informative and super intuitive tutorial. Thank you!

[@slicesofamerica]

Jan 2022 - just found this. Perfect!!

[@OK7studios]

Did they ever update this to your suggestion? To where when viewing and adjusting on mobile view automatically creates the custom css for that view?

[@jeffmcmahan8055]

Elegant Themes needs to change the device option so you don't have to open each and every element or row to make changes for devices.

[@NothingButAComment]

Make sure you SEE the mobile mode while editing!!!! When i click on the mobile icon in the settings it doesnt go into mobile mode automatically so i was making edits on desktop w/o realizing it. A quick fix is click on tablet, mobile, desk top until it starts changing between them automatically.

[@toobafatima3804]

Hey Josh, Great tutorial, really helpful, More powers to u dude!!

[@lorimcnulty4771]

You're a life saver, Josh! Thank you.

[@hamidmghazi]

The preview on Divi looks fine after all the changes but it is messed up in the actual mobile devices. What is wrong?

[@namazbekbekarysuly9112]

Liked the video right in the beginning cuz man is really talking about my pain points

[@LyubomirLalovMulti]

Just wonderful, I've been looking for "optimize emails for mobile devices" for a while now, and I think this has helped. Ever heard of - Jenevi Digital Duppy - (just google it ) ? Ive heard some amazing things about it and my m8 got great success with it.

[@vinoddadlani]

Please make a full video for how to make a website look good in phone, tablet and computer

[@scottoakley3206]

Good job. To the point. I can't tell you how much I appreciate you and this tutorial!

[@TrishMeyer99]

Great info. Thanks for the fast-paced tutorials too.

[@soul.rebel1986]

I'm new to Wordpress and Divi this was very helpful thank you!

[@ratfinder7812]

Thank you for this video, it answered every question on that topic....

[@leahs.6780]

3:00 is the reason I am here... thank you!

[@makaylagrace6023]

Thanks for the tutorial! I was talking with Divi support about this issue and they actually sent me to your video haha! Thanks for the help :)

[@JoshHallco]

ha that's awesome. Good to know! Glad it helped :)

[@denisebianco4583]

It didn't work for me I still have the same issue. Not good Divi after all.

[@reeld99]

The problem is with Divi, even if it looks correct on the visual builder it doesn't translate to the mobile device. I also have the problem where it looks correct on the phone but then when I reload the page on the phone it changes back to the settings in the divi theme customiser mobile style.

[@thebibleproof]

Great tutorial. Can you do more on vh and vw units, please?

[@DavidCruz-wo9jn]

Hi: On my current version of Divi there is no phone icon to the right of the settings. There is a mobile icon above each of the settings which allows me to switch back and forth between desktop, tablet and phone. However when I change the settings after clicking on one of those view options, everything is affected including desktop.

[@speedrunfantasychess]

Exactly! I'm using DIVI 4 and those icons and the desktop, tablet, smartphone tabs aren't there - basically all I can do right now I compromise text and heading settings so each device is "reasonable" - we all know how much developers love "reasonable" or "good enough" or "have to accept limitations" - argh!

[@spiritspun4836]

@@speedrunfantasychess I figured out that it was one of my plugins causing this error. I think it was the header/footer tag plugin. It might also be the minifying plugin. Once I got rid of it and switched to the Google tag manager it started working. I also had to go into the Divi panel under Divi > Theme Options > Builder > Advanced Use clear button for "Static CSS File Generation." I think in the current version of Divi the phone icon is to the right and appears when you mouse-over the right side of the design option.

[@AlisonStreetDesigns]

Great detailed video. Thank You for posting.

[@programmingchicago]

I don't see the mobile icon when I am in the visual builder and module setting. I don't know if they took it out, but the only way I can see it is in the back end, which makes it a lot more difficult. Any suggestions?

[@JoshHallco]

It's on some elements but not all. That's probably it. Otherwise just make sure on the VB it's enabled in the settings. You can hide or enable certain elements.

[@jeremiahdbecker]

@@JoshHallco Hover over the "padding" or "Margin" headers and the phone option will appear.

[@_RezaTaheri]

You saved me a lot of pain!!! Thank you!

[@leam4878]

when i change stuff on mobile it changes on desktop too !!! i dont understand why :(

[@peterramstedt6260]

Sad to say but DIVI have some work to do before its ok.

[@speedrunfantasychess]

Yep - same here! DIVI has some serious issues with this still and you can see the challenge. Some fine day we should be able to set the view in DIVI to phone, make a bunch of changes and those changes ONLY apply to a phone user. Right now, it's still compromise mode between devices. - Yech

[@dylanvisser3552]

same problem, i think its quite an issue.. after every change i make i first have to switch back to desktop mode and do every single change step by step like this

[@rickcorley2592]

It's kind of a pain but you have to select each layout individually, then (this is the critical step!) make your edits to each module on each layout, then save your work. You can access the layout you want to modify by hovering just to the right of the module name to bring up the menu selections.

[@AslanaWellnessShaman]

Yes and other sites build it an go never have to redo phone and tablet. Divi needs to fix this it’s so awful I’m so mad I even went with divi

[@MalindaBraggins]

I really appreciate this tutorial! However, I am following the steps you did to adjust the text size and it's not working for me. It has been a while since this video was first made, is there some update to the builder that doesn't allow this? Or, some hidden "feature" that has to be adjusted? Or, new steps to get it to work? When I try to make changes in mobile view that also affect desktop view. So, frustrating!

[@mjscorner2260]

Hi. May I ask if this feature do covers all the breakpoints for smartphones, tablets and desktops? Thanks. :)

[@eileenfleming1142]

Hey Josh, Is there an updated version of this topic? When I. make adjustments for mobile, I do not get the little device icon within the right side editor to make the adjustments only for the device. Divi is making the changes across all device layouts.

[@thulierlaurent]

Thank you ! You saved me for a professional project. Have a nice day !

[@ResedaMickey]

Isn't max-width in the builder now? I wish these Divi tutorials were dated or verision-numbered in some way. I keep watching tutorials then Divi helps says, "Oh, that's obsolete". INCLUDING THE TUTORIALS LISTED ON THE FRESH INSTALL APRIL 2022!!!!

[@gunjangunjan7509]

WOnder full ................best idea sir

[@beforbes1175]

This is the perfect builder ... if only it ever worked.

[@davidwinter4627]

Your totally right, I'm gonna ask them for a refund right now. I've been trying to build a mobile-friendly website it's sooo frustrating In the mobile view its good but when I open the site on my mobile browser it looks like Sh**.

[@beforbes1175]

@@davidwinter4627 I love when I get everything looking good, go to sleep and change nothing ...... and the next morning everything is off kilt again. Wait till THAT happens to you. You'll love it!

[@davidwinter4627]

@@beforbes1175 OMG!!! that's bad... really bad. I'm going to Elementor, have you tried it?

[@beforbes1175]

@@davidwinter4627 I have not. That said, I will soon. Can I swap everything Divi to Elementor?

[@davidwinter4627]

@@beforbes1175 I've made a quick search unfortunately you have to build everything from start to finish if you're switching :(

[@kashish8541]

this session was great.

[@RebeccaDMusic]

This doesn't work for me. When I change the setting mobile it also changes desktop.

[@JoshHallco]

Just be sure you select desktop,tablet or mobile then change whatever settings needed.

[@dimasirvan8516]

@@JoshHallco the setting will change in all mode, even when i editing the logo in mobile, set up for smaller size, and when back t desktop mode, the logo also change smaller...what we need is, the logo has to be responsive in size setting for each mode according to where we set up the logo. This cannot work in divi, can you help @Josh Hall

[@billie-grant]

Thank you for the video it was helpful! Do you by chance have a tutorial that shows how to set an image to a different location within the mobile view? I would like the image on the right side to be above the image on the left side in the mobile view. Thanks again!

[@vcr1232]

hi, is there a way to disable the mobile view on phones/tablet? and force my site to load in desktop view every time?

[@muhamadhamdanil1710]

Thanks for the tutorial, this video is very nice and could helping me to solve my problem on my site in mobile view

[@DylanSwain]

Awesome tutorial Josh!

[@newmischell]

Thank you so much for your tutorials! You have helped me a lot!

[@astaarsitek6423]

Now, Divi has a little change. But basicly same. But Thanks for the tutorial my friend

[@Pixiesister1]

Fantastic. Thank you very much.

[@joshallen-craig8226]

The Sections > Design > Spacing > Mobile button is not there in September 2020. Any suggestions?

[@StevedeGuzman]

Hi Josh. I dont see the 3 icons on my builder bar showing your left bottom. The one you click to see the layout wireframed in wysiwyg

[@JoshLacey1986]

For some reason I can't set padding or margin by device. Whenever I change it for one device, it automatically sets that for all devices. Any idea how to fix this?

[@denisebianco4583]

Same thing I can't make it work. If you find something please let me know. Thanks

[@mueller.mediagroup]

great tutorial but with DIVI, it actually doesn't work very well with mobile styling unless you input custom CSS for everything. Using the DIVI panels when you set something for tablet, it makes the same changes for Desktop and vise versa which adds a lot of time in between tweaking. This has been a thing with DIVI for the last two years =/

[@lauraelbertsen]

You sir, are the best!

[@RafaelCasagrande]

Very thanks for providing this good content mate. Keep it up!

[@cityotter]

Every time I go to optimize it for mobile, it changes the way it looks on a desktop, and vice versa. Why? It's really driving me crazy and costing me DAYS of work and frustration!!

[@reece2567]

Best thing is to get hold off customer support . I also have the same issue

[@ojanneh]

@2:50 He actually mentioned that issue

[@brittneylphillips]

@@ojanneh You're a lifesaver! Thanks!

[@wutangclan11]

Hi Josh! How do we automate all of the changes to be made across every heading etc.? It seems crazy to make these changes to every single heading etc. The changes will be virtually the same for every H1 / H2 etc. So how do we make the changes universal?

[@AslanaWellnessShaman]

I had to hire from Upwork a really cool guy from Washington. He has to change css coding and make all my pages look good on mobile. Cost me 80.00 but worth it than pulling my hair out. I have done much research since then and divi is full of bloated codes. But it’s either that or some wix thing or another and I didn’t want to do that. So if your stuck try posting an Upwork job to help you unless you want to learn css. They can go in and snap that together better. Also elegant themes does have good tech support but won’t do it all for you.good luck

[@JohnComley]

Brilliant tutorial, thanks. DIVI rocks.

[@tarachugh]

This is exactly what I needed! Thank you sir!

[@alainpatry]

You put out really great tutorials Josh! I have a specific question that was not answered in the video so hopefully you know the answer! Had you had a more elaborate header (say fullwidth with title, subheading, header image, logo image. buttons, etc.)and it really looked like a mess on mobile. Perhaps its covering your face or something... when do you decide ok its too complex to tweak with CSS lets just create a duplicate fullwidth header and make it look the way i want on mobile using the Divi Builder and then toggle its visibility on for mobile only? I cant find people talking much about this. For example, if you DO use duplicates with toggled visibility, do both still load (and therefore have their assets counted as part of site "weight" and affecting load times)?? I was under the impression that I was seeing the "clone" flashing before dissappearing....

[@JoshHallco]

Thanks, Alain. Great question - yeah I usually always prefer to customize with CSS for tablet and mobile opposed to duplicating modules and styling different for mobile. That's still a good option and I'll do that periodically, particularly if the design needs to be much different for mobile but I'm sure it affects load times. Regarding the header customizations, I know one new reputable plugin is the menu maker plugin from Superfly. besuperfly.com/product/mhmm-mighty-header-and-menu-maker/aff/274/ Might be worth checking out.

[@CharlesHutchinson]

Good stuff. Thanks for putting this together.

[@Newtorin]

Great video! Can I use different icon sizes for desktop and mobile, that would be different versions of the same image?

[@JoshHallco]

Thanks Karlis, yeah you could resize them for different screen sizes if it's in the Divi builder. If it's an actual image or graphic icon, I'd make sure to only use 1 and adjust it with CSS. Hopefully that answers the question!

[@sharksfan2011]

Hi Josh, love your tuts and have followed for some time now. I used to be able to do this, but have Divi 4 now and none of this works. It is exasperting, especially when you have multiple sections and rows using negative margins and whatnot. If I change the mobile (like you say with the exact steps) it changes the desktop version as well. Have you been in touch with ET since 4.0 came out? This is so frustrating I want to pull my hair out. Thanks in advance for anything you can do as I'm guessing I'm not the only one.

[@speedrunfantasychess]

I. COULD. NOT. AGREE. MORE. - none of the video tutorial works with DIVI 4 - why on earth would they scrap such important features - responsiveness is priority #1!!

[@prestonstrada1740]

Not sure if ya'll figured out the solution, but I believe I am using Divi 4 and if you hover your mouse next to the name of what you're trying to change, icons should pop up with a phone. For example, next to the words "Text Size" or "Line Height", if you hover next to that title the mobile icon will display for you to click. It's basically hidden and not to the right anymore like in the tutorial. Hope this helps.

[@charlybtube]

Great content, thanks! Question: how do you set padding for different mobile's screen sizes since there is only 1 type of template per device (tablet or mobile) while multiple sizes of the screen are out there? 🤔

[@holdthatthought877]

This video is very beneficial. Do you have any videos on speeding up wordpress and DIVI. My site is wicked slow.

[@JoshHallco]

Not yet but will add to my list. Here's a good resource in the meantime divi.space/tips-of-the-week/how-to-speed-up-your-divi-website/

[@holdthatthought877]

Thank you @@JoshHallco

[@FactRod]

Sir i have a issue when i exit from visual builder websites looks completely different and it become totally misaligned

[@mirandaallyn5731]

This was amazingly helpful! Thank you!

[@JanineMKartist]

I find that the mobile preview in video builder never seems accurate . Can you please explain ? Also sometimes I fine even when I click , say smartphone to adjust settings it still messes with the desktop settings .what browser are you using ?

[@chuckpalmer2616]

Hi Josh. Thanks for the video -- well done! I've found that this technique works great for Desktop and Phone (in both portrait and landscape mode). But I'm having a real problem getting things to look good on a Tablet in landscape mode. It looks fine in portrait but as soon as an iPad is turned to landscape, everything is WAY off. The content padding and margins are off so much that the page content slides up under the fixed header and in some cases is squished together horizontally; the header menu turns from hamburger style and wraps around; and the footer content wraps off the bottom area. Have you run into this before and if so, how have you handled it? I see a 3rd party plugin called Responsive Helper just came out so I'm thinking of going that route if Divi tech support does not come up with a solution. I've got an open ticket with them now. Thanks again for all you do!

[@andrewpressrecord1706]

Hi @Chuck Palmer, did you happen to find a best solution to your iPad problem? I'm having the same problem, 2 years later..

[@vini_6436]

Very nice video, i'm new with Divi and that really helped me, Thank you !

[@callan5323]

I'm a neophyte to the Wordpress/Divi designs and I have a question. After creating the website that can display on either a computer, tablet, phone etc. How does the browser know which device you're using so that it will select the web correct display?

[@katrinkpunkt]

If you didn't find out by now - the code will be put into different sections with a hint for the browser which to use depending on size (there are different options for this), it's called a "mediaquery"

[@baladocustomguitars73]

Very good tutorial, awesome, thank you so much Josh, however I have a doubt, I tried to edit with the divi visual builder and did it with the footer of one of the pages to adapt the social media icons, and the problem is that the changes affected the desktop version, and have to redo again, Now I'm afraid of modify something and miss the desktop version that cost me much effort to do.

[@charcoaldesign]

Great vid. Has the issue (as mentioned), whereby changes made in whichever mode you are in (mobile/tablet/d'top), been addressed in new versions of Divi?

[@programmingchicago]

same problem here.

[@AbdulShahid]

Thank you, very useful video

[@farhanmohsin4119]

Your tutorial is amazing ......

[@Ypunk27]

Somehow my visual builder does not have the mobile icon next to the spacing dials. Can anyone help?

[@nemanjamarkovic9818]

You saved my whole project mate, ty

[@jmillerdesign]

Your tutorials are better than what Elegant Themes puts out!

[@stuartknox1621]

Totally agree. I thought the Elegant Themes video confused me more. I understood this video easily.

[@mrmanon2003]

Hi ! Josh why i don't see the full image (album ) on smartphone these photos are not appear all ???thank you !

[@carlyzel]

I regret paying for Divi. On mobile, my site is a mess too. I change the settings and it looks better. BUT.... The settings then apply to the desktop version too. It's like its a universal setting. The change you make to one version applies to all 3. So frustrating.

[@st.armandskeylutheranchurc5110]

Great video! For some reason the version of DIVI I'm using isn't showing the phone icon on the right in the custom padding section (or any section). Thoughts?