In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor.

Tip #1. Responsive Design Begins and Ends With Correct Planning.
In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly.

Tip #2. Positioning Elements for Mobile Responsive View
When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in percent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.

Tip #3. Responsive Design: A Horizontal Approach
Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along.

Once we have made sure that section looking the way we want it to in Desktop, Tablet, and Mobile views, we can move on to the next. Where possible, duplicate sections, columns or widgets, and update the relevant content; re-use them as foundations to build the other similar elements on the page.

Tip #4. Change / Position Background Image
Certain background images, like that of the example below, may look great in the desktop view. However, it doesn’t take much experience to see how it wouldn’t work well when viewing the site on a mobile screen.

Tip #5. Create Alternative Section
As promised, we are only too happy to share our experience and insight with our community, who will no doubt be familiar with our next example. Well within the top area of our home page, we needed to come up with a solution to the 3-column text section. Rather than having this appear as 3 boring rows of text in Mobile view, we decided to create an alternative section, with the text inside a slider widget.

Read the full post: https://elementor.com/blog/responsive-web-design/
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro/

source

27 Comments

  2. Let me Rocket Science maybe would be as easy as all these various ways and unexpected moves just to do simple things. Elementor is just plain complicated it workings was not well thought about, by who ever were the people who decided how things should work. Because it could be way more straight forward and easier and yet achieve the same result.

  3. 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!

  6. 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.

  10. I find myself wasting way too much time fixing mobile spacing when going from desktop to mobile view in Elementor. It seems by now Elementor could simply apply a consistent spacing between all sections or at least offer a simple drag and snap feature to easily fix wonky spacing.

    Also, when hiding mobile sections I find the hidden sections make it a pain to see what’s going on. Elementor should allow users to hide these sections from view entirely (or maybe show a bold line to remind us where hidden sections remain). And when I have a hidden section in mobile it sometimes prevents me from scrolling up to the top. Very strange behaviors that waste an incredible amount of time.

    Another issue is with Elementor adding spacing automatically to sections that include multiple columns. Having to remove the column gap for each column and then manually applying new spacing to each is a real pain. I’ve tried a script that is supposed to fix this but it didn’t work as intended.

    Another gripe is the lack of modern looking minimalist outline style icons. It’s a huge inconvenience having to constantly create my own icons to match the existing ones. For example, they don’t even have some basic common social media icons available yet (even after their icon library update last year).

    My last gripe has to do with an error I received on a site. I went from full access and no issues, to being fully locked out of the site because of some fatal error. When I searched the provided error code I was unable to locate any remedy anywhere online or in the Elementor documentation or forum. Having to wait days for a response from support while being locked out and unable to edit a site really sucks. The strange thing is I tried every suggestion provided when it comes to lock out errors yet none worked. I was able to eventually access the site using safe mode but with limited capability.

    I’ve suggested these annoyances multiple times in the Elementor forum yet nothing gets updated. Some of the new features over the years are certainly welcomed, but it’s quite unfortunate that such basic functionalities and simplicities cease to exist; especially with such a popular platform as Elementor.

  11. 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

  12. 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?

  13. 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

  14. The WORST software ive ever encountered with. Will be switching to shopify today. I have put hours of effort and time into this and still not the way i want it to be. VERY VERY poor compared to shopify. I do not recommend anybody starting with elementor. Thanks.

  16. 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?

  19. 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!

  20. 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?

  27. 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.

Leave A Reply

Please enter your comment!
Please enter your name here