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.
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.
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
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.
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.
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!
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!
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.
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! 👍💯🌟🏆
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!
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.
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/
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!
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.
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!
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.
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!
@@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.
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
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
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.
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.
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!
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.
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**.
@@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!
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?
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?
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....
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.
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? 🤔
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?
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.
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.
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!!
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.
You can apply something things globally with the new Divi expand features but I still write custom CSS for mobile all tablet and mobile optimizations :)
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.
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!
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!
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 ?
I understand that the video was uploaded almost 2 years ago. Is there an option that you can completely have the mobile view not to show a certain image/block/text? I want to compare Divi with Brizy. Thank you in advance.
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?
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"
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!
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?
Thank you! I did this in the visual builder, and it looks great. However, when I go to the "mobile styles" customization, it looks completely different and what's live on the website looks like what's in "mobile styles". What can I do to make it look like the visual builder?
@@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
Hey Josh, I am attempting to do this now, but when I pull up the settings box for either sections or rows, there is NO icon showing for phone or tablet. Do you know if the software has changed since you created this tutorial, or am I missing something?
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.
This is such a great tutorial. I have applied it all but now my desktop is messed up.... have you got any idea how to solve that? Clearly it has worked for most others who commented, not sure why my site is responding in such way... would love some pointers or feedback. Thank you !
More than likely you just need to make sure any mobile edits were done JUST to the mobile view. Otherwise if you do edits on mobile it'll adjust other tablets and desktop.
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.
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!
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.
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
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.
Agreed! This video is one of my favorites as well.
Finally a video that doesn't have you buy some builder plugin. Awesome stuff helped a lot!
This was seriously the most helpful video, blog post, etc. I've seen yet on this subject! Thank you!
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! :)
Hi Josh! Just found you in January 2022! This is very helpful, concise, and professional. Well done, young man! Well done!🥇
Thanks a lot Josh! It's been 3 years but your video is still helpful.
Thank you, Josh! Tried working through DIVI support and you explained what they couldn't in little time.
.
Glad to help, Louis!
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.
Josh, I almost never use the Divi Visual Builder. Now, you've given me a powerful reason to put it into play. Thanks!
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!
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!
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.
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.
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! 👍💯🌟🏆
Thanks Robyn!
@@JoshHallco ~ You're so welcome, Josh! 😊
Josh, your video demonstration was spot on. Very easy to follow and with great detail, thank you.
Thank you! Glad to hear it helped.
Thanks for the cool tricks Josh! I agree the more I used Divi builder the more I love it.
Short but sweet and full of good tips. Thanks!
My favourite trick learning this was to realise I could create a completely different footer background for mobile devices :D
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!
This was really helpful, better than others I found at clearly explaining - thank you!
Great Video. I was add different section that only showed desk top or phone. This will help speed things up.
Thanks
Dave
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.
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/
Hey Josh, Great tutorial, really helpful, More powers to u dude!!
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?
You're a life saver, Josh! Thank you.
Good job. To the point. I can't tell you how much I appreciate you and this tutorial!
Life Saver! Very informative and super intuitive tutorial. Thank you!
The preview on Divi looks fine after all the changes but it is messed up in the actual mobile devices. What is wrong?
Great info. Thanks for the fast-paced tutorials too.
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!
I agree...let's see what Divi 5.0 has in store for us soon!
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 :)
ha that's awesome. Good to know! Glad it helped :)
It didn't work for me I still have the same issue. Not good Divi after all.
Liked the video right in the beginning cuz man is really talking about my pain points
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.
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!
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.
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!
@@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.
when i change stuff on mobile it changes on desktop too !!! i dont understand why :(
Sad to say but DIVI have some work to do before its ok.
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
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
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.
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
Thank you ! You saved me for a professional project.
Have a nice day !
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.
I'm new to Wordpress and Divi this was very helpful thank you!
Great tutorial. Can you do more on vh and vw units, please?
Your tutorials are better than what Elegant Themes puts out!
Totally agree. I thought the Elegant Themes video confused me more. I understood this video easily.
Hi. May I ask if this feature do covers all the breakpoints for smartphones, tablets and desktops? Thanks. :)
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!
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.
Thank you for this video, it answered every question on that topic....
this session was great.
Please make a full video for how to make a website look good in phone, tablet and computer
You saved me a lot of pain!!! Thank you!
This video is very beneficial. Do you have any videos on speeding up wordpress and DIVI. My site is wicked slow.
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/
Thank you @@JoshHallco
Awesome tutorial Josh!
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
This is the perfect builder ... if only it ever worked.
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**.
@@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!
@@beforbes1175 OMG!!! that's bad... really bad.
I'm going to Elementor, have you tried it?
@@davidwinter4627 I have not. That said, I will soon. Can I swap everything Divi to Elementor?
@@beforbes1175 I've made a quick search unfortunately you have to build everything from start to finish if you're switching :(
hi, is there a way to disable the mobile view on phones/tablet? and force my site to load in desktop view every time?
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?
Jan 2022 - just found this. Perfect!!
Great detailed video. Thank You for posting.
This is exactly what I needed! Thank you sir!
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?
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....
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.
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? 🤔
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?
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.
@@JoshHallco Hover over the "padding" or "Margin" headers and the phone option will appear.
The Sections > Design > Spacing > Mobile button is not there in September 2020. Any suggestions?
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.
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!!
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.
Hi Josh, can you show us a video showing mobile and tablet settings overall. What settings would you recommend?
You can apply something things globally with the new Divi expand features but I still write custom CSS for mobile all tablet and mobile optimizations :)
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.
Great video! Can I use different icon sizes for desktop and mobile, that would be different versions of the same image?
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!
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!
Very thanks for providing this good content mate. Keep it up!
Brilliant tutorial, thanks. DIVI rocks.
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 ?
How do I enact these changes globally for a blog/content driven site?
I understand that the video was uploaded almost 2 years ago. Is there an option that you can completely have the mobile view not to show a certain image/block/text? I want to compare Divi with Brizy. Thank you in advance.
yes, go to the block or section "Advanced" tab, check the "Visibility" dropdown menu, there you can change this feature
@@andremoura3878 thank you for your reply.
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?
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"
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!
Hi @Chuck Palmer, did you happen to find a best solution to your iPad problem? I'm having the same problem, 2 years later..
Sir i have a issue when i exit from visual builder websites looks completely different and it become totally misaligned
Hi ! Josh why i don't see the full image (album ) on smartphone these photos are not appear all ???thank you !
You videos are THE BEST and you are MY SAVIOR!!! :D
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?
Same thing I can't make it work. If you find something please let me know. Thanks
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.
You saved my whole project mate, ty
Thank you! I did this in the visual builder, and it looks great. However, when I go to the "mobile styles" customization, it looks completely different and what's live on the website looks like what's in "mobile styles". What can I do to make it look like the visual builder?
Hi Courtney! share the screenshots in the email so I may help you. zaighambajwa101@gmail.com
You sir, are the best!
Very nice video, i'm new with Divi and that really helped me, Thank you !
Hey Josh, How do u make sure the Logo is that big and visible. mine looks stuck in a corner
Fantastic. Thank you very much.
when I test it on my actual phone, it is still way off. any idea why?
This doesn't work for me. When I change the setting mobile it also changes desktop.
Just be sure you select desktop,tablet or mobile then change whatever settings needed.
@@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
This was amazingly helpful! Thank you!
WOnder full ................best idea sir
Good stuff. Thanks for putting this together.
Somehow my visual builder does not have the mobile icon next to the spacing dials. Can anyone help?
Your tutorial is amazing ......
Thank you so much for your tutorials! You have helped me a lot!
Hey Josh, I am attempting to do this now, but when I pull up the settings box for either sections or rows, there is NO icon showing for phone or tablet. Do you know if the software has changed since you created this tutorial, or am I missing something?
Hello, if you mouse in the options, you will see the smartphone icon over that. I saw it today jaja
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.
This is such a great tutorial. I have applied it all but now my desktop is messed up.... have you got any idea how to solve that? Clearly it has worked for most others who commented, not sure why my site is responding in such way... would love some pointers or feedback. Thank you !
More than likely you just need to make sure any mobile edits were done JUST to the mobile view. Otherwise if you do edits on mobile it'll adjust other tablets and desktop.
Thanks for the tutorial, this video is very nice and could helping me to solve my problem on my site in mobile view