Solving Responsive Web Design Challenges With Elementor - Monday Masterclass

[@yanraychuk]

What helped me most is the fact that you said not to get stuck on the notion that everything has to be the same and we should explore alternative options (06:17-06:27) on mobile, it pushed me to hide the sections that got messed up with the responsive button and create new ones which this time appeared fine. Thanks a lot

[@Marclarband]

Wow thank you so much! I've been stuck for days trying to figure out why there were no changes being made to the mobile site. Using percentages fixed the problem! You're a lifesaver!

[@flatspaces3876]

can you do a video on the options of px, rem, em, or vw when selecting font size?

[@scratchmasterp]

💯 this

[@andonisr]

Great tutorial! It saved me creating different rows visible for mobiles only! I hadn't realised that option there....!!! Thank you!!

[@jackies35]

THANK YOU SO MUCH FOR THIS. I watched this in the past, and now I am back. How did I forget this? Thanks!

[@erichepperlewp]

The bit about popups was insightful!

[@deskrent5450]

I love that you explain good design practices, like copying and pasting sections that you know work.

[@markhogan77]

Having come across many 'mobile view' challenges, im pretty well on top of it.. appreciate your clear explanation. ...big thumbs up!!

[@helenbassettgallery]

Thank you, I wish I'd known this two weeks ago, ha, ha, but now I have the sane way of creating mobile responsive websites...brilliant. :-

[@qaziakashahmad2034]

The best explanation on responsive designs, EVVVERR!!

[@isntlifebetter]

ughhh you are a GODSEND!! PERCENTAGE FREAKING WORKS!!! THANK YOUUUUU

[@zaheerasghar5133]

I learnt more from this video then whatever I learned last whole year Excellent

[@andycosta68]

Amazing video. Very helpful! I learned a ton in 9 minutes. Thank you!

[@williambyrne7795]

Wow!! At last six solutions to a nightmare. Thanks matey!!

[@stxyist]

Give this man a cookie ! And make sure it's mobile responsive :)

[@webexpressions3307]

Very nice tutorial guys, keep it rolling.

[@PhilipIngram]

These are truly great tips. I always work each section at a time testing in multiple sizes, especially outside of the editor just to be sure I don't need any special breakpoints, using Pro css to embed the fixes into each element/column/section I plan on copying while also being portable to import/export.

[@bwtr203]

I hope you guys add a mobile landscape edit mode in the near future. Much needed.

[@abhimandhare]

You are best instructor

[@MVS_DJGillyGill]

awesome and lol learned the hard way def make sure to test for mobile as you go ..loving these classes btw

[@AntGeezer]

Some good quality tutorials from Elementor showing up these days 👍

[@gypsysoulgypsy]

U speak like a news reporter. Awesome style!

[@KennethBDone]

In just 9 minutes i learned quite a lot. Thanks!

[@thebibleproof]

The full notes are great!

[@SupernovaSites]

Awesome video thank you! At @4:40, how do you change the photo to a different one for mobile?

[@MelTaylor]

Wow. Excellent tutorial. Incredibly helpful.

[@vijaysolankidigital]

Thanks for sharing this useful video. You're awesome!

[@Grimmjow-VI]

Hi Simon, What to do with contents, two images for example, which are sticking out on both sides (left and right), and then when it's viewed on a higher screen resolution, they would look too far apart. It's kind of annoying using the css code @media for all sorts of screen resolution.

[@geoffleggett5286]

Superb presentation. Building my personal website, a lot of thought and planning went into it......sadly not enough on preparing for the transit to mobile devices. Now, I have some edits to make.

[@richard135b7]

Excellent video. Useful and insightful info. Thank you.

[@bonvivantcheftori2384]

Excellent video! To the point and helpful. I'm still having and issue with my background image. I changed the size for mobile, but there is all this space around the graphic. There is no added padding in the advanced boxes. Can you help me know how to fix this?

[@Elementor]

Hi Bon, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314

[@haskellXR]

Great tutorial. More mobile centric content would be great!

[@kianiano]

Brilliant! Thank you!!!! 🙂🙂🙏🙏

[@conraddiaz2274]

Awesome! I've been getting better at this, and I thought that it made sense to go with % (percentage) in my particular dilemma (instead of PX), but I wasn't sure. It's great to see that I am on the right track. Thank you so much -- very well explained and cover exactly what I needed.

[@Itsrichayo]

Great Tut. Thanks for the content.

[@chrisgreek6957]

Great video!

[@traianivanescu24]

Could you please explain the different usage of %, PX, and VW?

[@MoxetKhan]

Very informative episode.

[@webexpressions3307]

Somehow I agree with some of the other comments as you have to use media queries for laptop sizes and the sad thing is that a huge portion of business people use this device daily.

[@Elementor]

As we mentioned in the video, if you build it right it should look good on all devices, even with just 3 breakpoints

[@andrewdowniephd]

Hi thanks for the tutorial I wondered whether you had any information regards image sizing for responsive builds? I'd like to add a slideshow to a client's site but wondered whether I should have different slideshows with different images sizes for different devices, hiding those that were not for other devices. I wondered whether you could advise on image sizes for the different mobile devices? Thanks.

[@mariyamgul9209]

Hey very nice video , I'm using elementor we are wive in mobile there one issue , we are tapping on screen then pages are strach like big size not set in mobile alignment after we zooming out and make proper how I can solve this issue.

[@clintt5266]

Massively helpful video. thank you

[@PhotoBooth72]

Can you set different text and heading sizes for mobile only, I have tried it but it seems to change the size across all devices so maybe I am doing it wrong.

[@JK-pr3lu]

Thanks for the video - well explained. One question, if I "hide" a section on the mobile view because I have a different section which only shows on mobile, will the user's browser still load the content that is hidden or will it skip it all together (thinking about page load time...)? Similarly for images, if I put a different image to show on the mobile, does that mean my desktop image will NOT be loaded on the final user's mobile version at all or is it still being loaded in the background?

[@fluttersheesh8884]

Exactly what i needed. Thanks

[@joevallone7313]

Top notch tutorial. Gracias Amigo!

[@amandapage4560]

Thank you with all my HEART! More please!

[@dren950]

Totally saved my butt! I was pulling my hair out and much like yourself I don't have much left to pull at! I like Elementor but they did miss big on a few points. I built my site step by step using ELMTR tutorials ...no mention of % or columns that should be set at 750! Now that I've done those everything is falling into place. PS could they make that ever-important % button any smaller? (That's a dig. .... not a suggestion!) Thanks for the great video. I like. .... I subscribe!

[@Elementor]

Thanks for the feedback Gary. If you are still working on making your site responsive check out this video as well kzbin.info/www/bejne/eprPeWioq7mciZI 😊.

[@nicabbq]

Great explanation on how to set up pages for mobile. I am having a problem with a link to a pdf. I placed it in the website view and it works great (uploaded page to media, copied URL, attached to text). The link does not work on mobile. How can I fix this?

[@silvertree2189]

Amazing! Godsent!

[@WhoSaidPhotography]

great tutorial guys, lots of info for me to use. Keep them comming

[@mekhla4002]

This is really helpful. Thanks a lot.

[@forestcityguitarlessons]

Best video I've seen for Elementor yet. This is enough to help me fix my website :) I am wondering though, in the event you're creating multiple sections/widgets for mobile only or desktop only, how might that affect page load time on the various devices?

[@requirepuertorico7830]

Very nice and useful class :-)

[@MoazMohammed]

Would the boxed max width to 750px work for all mobile device sizes? It seems like the % option is much better imo.

[@protap888]

So Much Thanks

[@TheLukeflannery]

Is there any documentation around regarding making a site responsive in landscape mobile view?

[@caradoc6]

Hi, thanks for the tutorial mate ! But is it possible to be responsive for tablet in both angles ? Like vertical and horizontal ?

[@Thefootynutritionist]

hi thank you for the video. I have an issue where it all looks great in mobile view in responsive mode however when i view on my mobile, the colors have changed? any idea?

[@paulandrewpimentel2005]

Great video!... I will edit by 'Percentage'... Why does my Desktop editing change after I edit the Mobile (so frustrating). I thought it was supposed to be the other way around (Mobile changes after Desktop editing)- Anyway, are my settings wrong in Elementor?... Thanks in advance for any help with this.

[@Elementor]

Hey Paul, thanks for your question. Only settings with viewport icons can be changed for specific sizes. If a setting doesn't have a viewport icon next to it, changes will affect all sizes. Please check out this video for more on Responsive optimization: kzbin.info/www/bejne/e6KpqZiiqtBni5Y.

[@romanticvideo6063]

Too much understanding thanks

[@borisnieminen677]

Hi, why is Elementor responsive settings for Laptop limited to 885px? I would like to design for certain Apple devices that are 1024 in height. Also laptops that have a high percentage of use such as 1440 X 900 and 1600 X 900. I can't edit with precision when positioning elements. Is it hardcoded(?) or is it possible to increase the height in responsive mode editing for laptop resolution? Cheers

[@Privetagromar]

GOOD ADVICE

[@bigboicreme]

Uhh i have an issue with absolute button locations being in different places on top of graphics depending on the size of the phone screen help

[@markkane6094]

Is there a video that explains what I am doing wrong when using sliders on mobile view? My text animation will not appear correctly and the slider does not move automatically even though its set on infinite loop

[@keatondayne]

thank you for saving me a lot of time

[@TobiasLA]

Does this only work in Pro? When I change one of the marging or padding values, all others are the same automatically, so it does not help at all solving this problem. Where is my mistake?

[@lukasholgersson2851]

2 months late, but click the little chain link to the right.

[@TobiasLA]

@@lukasholgersson2851already found out but still thanks a lot! best regards from Germany

[@lukasholgersson2851]

@@TobiasLA Good! Hit me up if you need any other advice. Best of luck in these times from Sweden

[@TobiasLA]

@@lukasholgersson2851 appreciate it! For you guys too! I'll visit sweden one day, must be a great country with cool people. Maybe one question: which theme is the best? I get issues with my enfold child regularly

[@lukasholgersson2851]

@@TobiasLA tobiasplatzen10 Yeah, you should! Don't come here to drink, smoke or do drugs tho. The alcohol & tobacco tax is through the roof and the drug laws are harsh as duck. The absolute best theme is Hello, it's created specifically for use with Elementor and is very much lightweight. The only code you need to add to the theme(under customize theme). .site-branding {display:none;} Then it is a clean slate and you can build everything from the ground up with Elementor. Hit me up on instagram if you want me to send you some sites I've done. And if you think I am decent enough I can help you out with some tips and tricks. @pixel.wizard

[@gordonbrownlee1215]

Can I give you 5 stars - superb?

[@aminaassannam8252]

Thank you very much!!

[@jovanperic4214]

Thank you for this nice informative video. I have been using Elementor for a couple of months already and I love it. As I learn its features every day, I constantly get in the trouble with adjusting the design from desktop to laptop view. There is no option in Elementor for laptop resolution, only desktop, tablet and mobile. Can you help me with this please. Thank you very much.

[@sonareclipse9810]

When you hide/show different sections on desktop vs mobile, how does this affect SEO?

[@leocorconsulting9737]

Hello I was wondering if there was a solution to add different size images for the background fallback image if you select to play a video on the desktop version for a section. The reason I am asking is so I can load different size images for the mobile and tablet view for performance purposes

[@swagmonkey351]

my issue is Videos that i embedded on the website are playing small screen on androids but are full screen on iPhones. I want them to play on smaller screens as are on androids. How can i solve this

[@bayareababe]

my wordpress website is moving around left and right when i touch the screen in mobile view. can you help me fix it?

[@Lydstudiet]

Really nice..Keep making more please :)

[@GeorgeNicola]

Does hiding elements in Mobile view but not on Desktop affect SEO?

[@mothpatrol]

My page moves from side to side on mobile (very loose). How do I fix this? Thanks

[@lynbowker6813]

Love it! Another great tut!

[@prashant71194]

Hey there intelligent people, when I get done editing the mobile layout and open it up on my android, the canvas seems to expand in width, such that I can scroll right to find a bank white space (almost double the width of the actual content). I have tried this on other mobile devices too, what should I do?

[@gafia1123]

there is a problem with sizes for the desktop variation in responsive mode for each size there is a normal size in the desktop , and the size between desktop and tablet in these sizes hope you figure it out quickly, i have elementor pro and one more problem is my ip still blocked when i use elementor library i have to use VPN and thats not good you guys told me you fixed it

[@Creative-jg6gq]

Hi - Video section backgrounds dont rezise for mobile - most the content is outside the view - any fix for this?

[@Elementor]

Hi Sarosh, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314

[@Creative-jg6gq]

@@Elementor Hi - thanks - solved the issue by removing the video from section background and just added the normal video widget with full width and no padding to cover entire section - same effect and responsive.

[@Tsgraphix1987]

I like this guy!

[@michaelhofby]

Hi Elementor.. It is really annoying that the preview shows everything, even if its hidden for tablet/mobile view.. It makes it way harder to properly layout the sections, columns and widgets properly because the content that shouldn´t be shown are still there in preview mode, so you are forced to go to dev tools in browser and look for a correct view on how it will look.. This makes the preview almost pointless in my opinion, since you are still forced to check via other tools.. Please try to improve it because it shouldnt be that difficult for you guys i bet

[@mylardochery8541]

Hello there, i'm having issue with the responsive mode. As soon as i finish editing the mobile mode, the desktop and tablet will take the same properties of the mobile mode. Even if i saved after editing each mode all three of them ended up taking the same properties of the last mode i edited. Any help please?

[@manjushamisac8040]

@Mikado how can i edit it only for mobile view

[@manjushamisac8040]

@Mikado Thank you so much

[@authentickenyan6284]

Thank you ! Great tips.

[@TatraHraje]

The problem is there is no way to make your website notebook responsive :) Elementor can make responsive for mobile, tablet but not for all types of deskop monitors. If you making website on 1920x1080, your web will be not responsive on other monitors like 1366x768 :(

[@Crudelus1991]

Maybe start with making your own toolkit touch friendly. It's a real pain elementor editing does not work on mobile.

[@michaelhofby]

Why would you want to set max-width to 750px for desktop too lol ??? Seeing content being 750px wide on a 4k monitor will look very weird

[@plantifulalexandra]

Yeah, looks weird.

[@suyenfs]

Hi, my website does not look good on iPhones, also the menu is not displayed. How can I solve that?

[@Elementor]

Hi Su-yen, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get solid advice from other web creators. And you can share screenshots and links there as well: facebook.com/groups/Elementors.

[@올리버1349]

Is popup only available for Pro version?

[@Elementor]

Hi 한국어, thank you for your question. Yes, the Popup Builder is a Pro feature: elementor.com/features/popup-builder.

[@EricaDyson]

Thanks.

[@manjushamisac8040]

Can anybody give me a solution 1.when I click on full width elementor my footer menu disappears eventhough it must show it. 2.while using absolute position the mobile view will crack & all d contents will overlap on each other

[@kt1122]

My Wordpress Elementor doesn't look like yours or have all the same buttons in those areas. :(

[@Elementor]

Hey @kt1122, thanks for your comments. This video is about 3 years old, and Elementor has grown and changed over the years. Please check out our main channel page for newer videos kzbin.info

[@jcr9065]

Hi can somebody help me, if I build separate (multiple) sections for each device for one URL, how will Googlebot index the page? Will I be penalised for 3x content (1 section of content for each device), or will the search-engine bot recognise that each section is designed for one device and therefore not duplicate content? Thanks!

[@Beglozano]

I have this question too. Did you find an answer?

[@vanjobs]

If you remove content / wording from the responsive / mobile version will it affect SEO? Thanks in advance whoever can assist in this!

[@adeus6206]

He Elementor! When I edit something in mobile, it messes up whatever I've done in desktop. Any solution to that? Thank you!

[@chansonkun7989]

common sense.

[@adeus6206]

@@chansonkun7989 how do I keep certain changes fixed in mobile, desktop and tablet?

[@bjnslc]

Need two more breakpoints for landscape on mobile devices.

[@landofabraham]

what about less than 360px phones?

[@landofabraham]

@Simon Shocket Yes. Thank you for your valuable comment mate.

[@JLThisisMe]

It's an excellent video, but Elementor DEFINITELY could have been more user friendly out of the box. It takes an awful lot of effort for something designed to make things easier.

[@uditkumar9510]

Hey team one question! My website is responsive for desktop, tablet and phone. But when I open is wide desktop screen. - 27" Website elements get stretched ! How to make responsive for wide screen?

[@Elementor]

This shouldn't happen. You can use Max Width and other size settings to limit the elements.