How to Create Mobile First Designs with Divi

Many websites get tons of visitors from mobile devices. This leads to the question of whether or not your designs are sufficiently optimized for smaller screen sizes. With Divi, a design that is built for a desktop experience ends up being instantly responsive as well. But just because something is responsive doesn’t mean it’s optimized as well.
If mobile is your main source of visitors, it can really help to start designing and building from a mobile perspective instead of a desktop one. In this post, we’ll show you exactly how to do that.
After going through some tips and tricks that you should keep in mind, we’ll also recreate an example from scratch that takes these tips into account.
Read the article here: www.elegantthe...

[@kathrynmanifold6580]

Thank you for a great tutorial. I really appreciated that you talked slowly and moved through each step slowly so that I could follow the cursor. All I have to do now is follow your instructions.

[@scottfredericksen6533]

This was a good example of focusing on Mobile First, but to really help me with "Mobile First", I would like to know if most designers have a completely different page for mobile to give them the freedom to re-arrange elements and exclude specific elements from Mobile vs. Desktop. For example, using Divi, I set up my mobile first design to have a completely different layout than my desktop site and I did this by having specific sections be hidden when displaying on a mobile device as opposed to a desktop browser. Specifically, I hid some of the larger video and images to ensure that the site is fast for mobile devices. I'd love to know if others think this is a good way to approach this solution? Or if there is a better way using Divi? Or if I should make my desktop experience more similar to my mobile design. Thanks for any feedback.

[@Pingwinable]

Same question here

[@mtnerd]

Thank you so much for this video. I'm returning to Wordpress/Divi after more than a year and I didn't have much experience with Divi before that. This video saved me! Well done!

[@kaledigitalsolutions]

Hi Mak! I noticed you use vw for the text size. I would love to hear your view about why you choose it over px, rem or em. Thanks for all the great tutorials!

[@chuckpalmer2616]

How do you handle the Tablet when it is in landscape view rather than portrait? The Visual Builder only shows the tablet layout in portrait mode. When the tablet is turned to landscape, the page's content no longer lines up nicely. It slides up under the header, is squished together horizontally in some cases and the menu switches from hamburger-style to regular desktop menu and wraps around. Likewise the footer content does no resize nicely and falls off the bottom. Not exactly responsive!!

[@noahpapafagos8666]

Trying to follow along but a lot of these adjustment settings aren't even here in the options anymore!

[@ibrahimasouleymanembengue3026]

Hello Divi Nation ! Thank you for this tutorial, very useful.

[@christhomas3962]

Hi, I don't know if i'm using a different version of Divi but I can't see alignment in my row settings. Any idea why this might be?

[@GreenthumbsGarden]

Mak.... you are, A legend! 😉

[@firstsagba]

Good timing; Thanks for the tutorial; however, can add a "Mobile version" to an already existing Desktop design?

[@sofianebouazzaoui4762]

Hello Mak! Thank's for this tutorial

[@ama8437]

Please Make More Mobile-First Videos Thanks

[@THAIWAK]

Great Video, thanks for posting. Helped me a lot. I have a question. Is it possible to alter the product page to make more mobile friendly? I'm using the default template. Thank again. Stay Safe. Martin

[@drossi2934]

You're going to leave the messy text position on tablet and desktop--this was just more like watching you go through rote tasks, why. not explain why you're using what you're using (e.g. vw vs. px) and then fast forward through all the color stuff. I love these tutorials but this one just felt like six minutes of you changing colors not explaining what you're doing.