6.6 Optimize your Divi website for mobile devices

A majority of the internet traffic comes from mobile devices so make sure that you have a mobile optimized website. Divi is responsive by default but you still need to tweak your font sizes, padding and other fine tuning for smartphones and tablets.
We'll also explore how to hide and display content for different devices.
This video is a part of a complete WordPress tutorial with more than 6 hours of video material - completely free. Find the full tutorial at: divimundo.com/...
All links, files and code snippets mentioned in the chapter is available below. 👇
🔗 AFFILIATE LINKS WITH EXCLUSIVE DISCOUNTS
➡️ 20% off Divi: divimundo.com/...
➡️ 69-76% off web hosting: divimundo.com/...
➡️ Divi Supreme: divimundo.com/...
➡️ Divi Toolbox: divimundo.com/...
➡️ Divi Blog Extras: divimundo.com/...
➡️ Divi Form DB: divimundo.com/...
This video is not sponsored but it contains affiliate links to SiteGround and Elegant Themes. If you make a purchase via these links, I’ll receive a commission. But it will NEVER cost more for you. Your support makes it possible for me to create more free content. Thank you! 🙌
🔗 DOWNLOAD FREE LAYOUTS & OTHER RESOURCES
➡️ All images, icons, code snippets and layouts used in this tutorial are available for free at: divimundo.com/...
➡️ Visit the live demo website that we create in this tutorial: divicrib.com
➡️ Free download of all layouts that I created for this tutorial: divimundo.com/...
➡️ Premium Divi plugins mentioned in this video: divimundo.com/...
➡️ Six tips for a better Divi mobile menu: divimundo.com/...
⚡ DiviMundo.com is dedicated to spread knowledge about WordPress and Divi. The vision is that everyone should be able to design beautiful websites without exhausting coding issues.
⚡ DiviMundo.com is produced by Duse Media, a WordPress agency in Malmö, Sweden. Read more at dusemedia.se (In Swedish)
⚡ DiviMundo was founded in 2017 by Victor Duse, the tutor in this video.
Find more tutorials and more free WordPress web design resources at divimundo.com/en/
Affiliate disclaimer
We are dedicated to sharing knowledge about WordPress and Divi. Some of the links in this video are affiliate links. This means if you click on the link and purchase the item, I will receive an affiliate commission, but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. DivMundo is not affiliated with nor endorsed by Elegant Themes, SiteGround or any other brand mentioned in this video.

[@DiviMundo]

👋 This is a part of a 6 hours free course. Find all the chapters here: kzbin.info/aero/PLjECge4F19csB2CqH5hzUO2bkn7nHvjjH&si=ZDiXcntkCmntNJAi

[@BihnDan]

This is exactly the content I needed to see. Perfect. Thanks!

[@DiviMundo]

Thanks, I’m glad you liked it Dan! 🙂

[@krystofdostal1413]

Hello do you know why ms website looks so messy horizontally on tablet but good vertically? Is there a way to change website looks onlx horizontally and vertically it will still look the same?

[@northburngardens]

Thanks for this man it really helped

[@DiviMundo]

Awesome, I’m glad to hear that! 🙂

[@user-yq9xz7js5j]

When I edit the module to look good in tablet or phone mode it automatically changes my web browser mode. How do I differentiate between the two themes so that when I edit phone mode it only affects that view?

[@DiviMundo]

Hi Alicia! This is a common issue in Divi since the responsive design settings doesn’t follow the responsive preview mode, which doesn’t make much sense. I try to explain the difference between the preview mode and the design settings in this video: kzbin.info/www/bejne/f6i7nGh7d66sZ8ksi=NDa0N4XhaUTuu2JB Let me know if that solves the problem for you. 🙂

[@user-yq9xz7js5j]

Thanks for the clarification @DiviMundo. I am in the correct area now but maybe it is because I am trying to edit an image not just the size of text. Are background images treated differently on Divi builder? Thanks again for the help!

[@DiviMundo]

@@user-yq9xz7js5j Backgrounds, text content etc. can be changed using the Responsive Content feature. Check out this post: www.elegantthemes.com/blog/theme-releases/responsive-editing-hover-editing-for-divi

[@Guldhammer_DK]

Thank you for a good video - one question - how did you get the blurbs in the last minute of the video to stack in 3 on tablet? normally they stack beneath each other right? Also do you ever consider using the Theme Builder and make individual pages for tablet and mobile?

[@DiviMundo]

Thank you Keld! That's a good question. If you use a six column row (which I use for the logos), Divi will display it in two three column rows in tablet. But if you use a three column row, Divi will display it in a one column row for tablet. But you can use custom CSS to force Divi to display a three column row in three columns in iPad. Just go to the Advanced tab in the Row settings and paste this CSS in the Main Element for tablets: display:flex; You might not see the change in the Visual Builder but it should display in frontend. To avoid squeezing in smartphones, you might want to reset the flex display by adding this CSS in the rows' Main element for mobiles: display:block; Let me know how it goes!

[@libss]

thank you so much for this amazing tutorial. Everything is working for me except the icons in the blurb module. For some reason, the icons won't appear on any of the 3 views. Any ideas why this might be happening?

[@DiviMundo]

Thanks! It could be an https issue. Make sure that everything is green at www.whynopadlock.com

[@RA-po5rl]

Hej! Tusen tack för grymma tutorials! Tänkte bara fråga hur man ändrar storleken på loggan i mobile version? Min är superliten och det går inte att ändra storlek med custom css :/

[@DiviMundo]

Kul att du gillar dem! 🙂 Det beror lite på om du har använt Theme Buildern eller Theme Custommizern för att bygga menyn? Kolla även så att du inte har en massa whitespace runt loggan i själva bilden också. I så fall kan du beskära bort det för att den ska visas större. Kan du dela en länk till sidan?

[@RA-po5rl]

@@DiviMundo Lyckades faktiskt fixa till det! Gjorde om menyn i theme buildern till full width. Och jag omvandlade min logo bild till svg formatet. So far, so good. Nu måste jag bara se till att mobile och tab versionen blir lika bra som desktop. Vilket är klurigt just nu. Hoppas att det är ok om jag har en fråga eller två lite längre fram?

[@DiviMundo]

@@RA-po5rl Härligt att höra! Theme Buildern är alltid att föredra. Frågan är fri, jag svarar efter bästa förmåga. 🙂

[@RA-po5rl]

@@DiviMundoDet låter bra. Tusen tack! 😊

[@RA-po5rl]

@@DiviMundo Hej Victor! Nu har jag min andra fråga och det har fortfarande att göra med mobile view. När jag trycker på t.ex. mobile view och gör ändringar där, så slår det igenom i alla format. Alltså i desktop och tablet. Trots att jag väljer mobile. Finns det nåt sätt att åtgärda detta? Tack på förhand.