Elementor Responsive 101: All You Need to Know! 

Aviva, thanks so much! This was the Elementor "Responsive" Tutorial I've been looking for. FYI - I had to actually slow down it down to .75 instead of speeding it up to 1.25 as I do for most tutorials.

This is the same old clunky system which has never been updated. We need advanced breakpoint management yesterday

We need Mega Menu, Table Texts, Multiple locations pin 📍 on google map.

I appreciate this step-by-step tutorial so much!

thanks for this! I am looking to make the width of the slider carousel on the background of the hero section narrower. I have done it by adding to the 'additional css' code for width = 70%. I also added right = 0. It made the carousel slider central, but then after fiddling with other stuff, and making the width smaller it wasn't central. On css there is no 'horizontal-alignment : center' so not sure what to do. What do you suggest please? Thank you very much!

Hi I am trying to edit on phone view but the changes comes on desktop and tablet view as well, kindly help

Thank you. Love from India 🇮🇳🇮🇳🇮🇳

Great tutorial BUT how do I make it responsive for different desktop screen sizes? Let's say a user wants to have half of their screen used to read something on my website and the other half for something else, even though my site is responsive for mobile and tablet it doesn't adjust automatically for a change in desktop sizing

Hello, how do I keep the same deskopt design for different resolutions? I work with a Laptop and two additional bigger screens. I designed a mega menu with a plugin and elemntor pro, but when I put the browser window on my laptop (which is smaller) the design is totally messed up. Do I need to focus on specific widgets and instructions e.g. font px or anything?

Please could you do a tutorial about the responsive navigation menus? I always have the same problem with the length of the hamburger menu for Tablet and Mobile. It is always or too long ( and out of sight ) or too short ( what is ackward ). What is the treat to have a responsive menu on tablet and mobile for all type of devices? Help me please!

very clear explanation, thank you!

Mine is not allowing me to edit my Nav Menu. Please help. this has been stopping me from launching my bog for weeks now. As the the menu is not showing on mobile.

0:00 - 01:01 - Intro - What We’ll See in this Tutorial 1:02 - 04:08 - Elementor’s Responsive Features 2:58 bigger screensize will automatically pose its styles onto the smaller screensize ( desktop to tablet and phone) but NOT vice versa. 2:59 ??? how ???? -> smaller screensize will intuitvely know how to change width and adjucst to the screensize. ??? 2:59 2:59 4:09 - 05:59 - Responsive Menu 6:00 - 07:47 - Column Width & Wrapping 7:48 - 08:48 - Responsive Font Styles 8:49 - 09:34 - Hide and Show Elements on Different Devices 9:35 - 10:08 - Reverse Column Order in Different Viewports 9:51 goto responsiveness -> reverse coloumn for (tablet) .... see from 9:35 10:09 - 11:24 - Hide & Show Elements - Best Practice 11:25 - 12:12 - Responsive Widget Options 12:13 - 13:56 - Recap - What We Learned in this Tutorial

For desktop it's perfect in the editor yet on my widescreen menu and product grids are wrong. Should I still go by the editor?

Very nice and clear explanation. But please can we stop this sloppy hiding, showing and copying sections for mobile (and other) devices, it just adds bloat and can be very confusing when you have many sections on a page. We should be able to change content per device like another page builder (cough *Divi* cough). Thanks.

Hi @Elementor, I have a very similar problem, every time a modify the size of the browser window in desktop mode, the vertical position of the first section elements moves, even if if the windows did not match the tablet or mobile phone size criteria. How can I get it to not change its vertical position regardless of the window size ? (maximized window on screen or smaller window size on screen). Thank you.

How is the section at 10:14 build with the flip box widget? I tried to rebuild it but it wasn't that successful.

Thank you, this was very helpful! But how do we fix things that run off the page (not just wrapping like shown in this tutorial) for tablet and mobile views?

Good explanation but I think there is lot more to successfully making a responsive site. I am looking for a way to get buttons over a hero image in responsive mode.

Awesome! Everything I needed. Thanks

Nice, 1 question: When applying a scroll effect in a motion effect, using horizontal scrolling causes the drag to move erratically left and right on mobile. On mobile, it should only have to drag up and down. I want to create an image that disappears left and right through motion effects, is it impossible? There is no problem on the desktop, but on mobile, there are problems when dragging.

i use Elementor header and footer plugin to create both it works fine easy to use but for responsive in tablet breakpoint the header menu is not show anything. HELP!

I can;t figure out how to align something in the center on mobile. The adjust height to screen option doesn't work for some reason.

Excellent presentation.

Thank you very much. beautifully explained

How to resize products archive in elementor while doing the responsive?, doesnt gave me the option to to this, and cannot find the container main selector to resize that product archive y.y

Very informative. Thank you.

Nice and well explained. 1 question though: what to do when devices are used in landscape mode? The layout will change dramatically and I do not know how to fix that. If possible.

Well explained. Good Job

How do we fine tune tablet horizontal view vs vertical

how do i make a specific hyphenate breakpoint for my full width text?

2:35 critical information that I wish was more apparent! thank you

Can somebody help me about the mobile responsiveness of website. It appears different in other devices. What should I do about it?

If I check my Elementor site from my laptop is looks completely different than my desktop. This program is crazy and is all over the place. Plus, if I make any changes in Tablet and mobile it absolutely effects Desktop view.

Hello my Tablet break point is 1024px, does anyone know why is 1024px and not 768px (like this video) , and how I can change it?

Amazing like the video from cassie we miss to the videos from cassie sooo short and sooo great

It is the suggestion it would wonderful if we can integrate elementor forms directly with Google sheets without plugins

Thanks for the video. Question, the section that says a Find Us On Social Media, how did you get that to align vertically?

in Elementor I see the tablet correct, but on the tablet the images don't have the same size, I have cascading containers like landing page with maximum width

if i put a picture in a different section on mobile, it changes on desktop?? whats going on

I would be awesome if you folks could make these resource files downloadable so we could all play along.

2:40: "And tablet edits don't affect desktop"

When I tried this (changing 20/20/20/20/20) to (33/33/...) the column won't wrap down why does this happen TT

This was very helpful I'm older with bad eyes and sometimes Aviva moves too quickly. She DOES and then when she has done something the tells us: "Let's do it" and I get lost. But, this time I was able to follow along. I strongly recommend going to settings >devices on her computer and making the cursor larger. Also, a webcam pointing at a 15-degree angle to the screen might work so you can point with a pen tip to something you are demonstrating. This was helpful. Combining study with Aviva and Wes McDowell I'm beginning to "get it."///// I want to remind new editors," Don't go crazy for more gimmicks. Times change. People do not. Pictures draw the eye. WORDS SELL. This is advice from the greatest marketers and advertising guys in the world. Therefore, write more and use things like sliders less. You can get started with basic Elementor FREE and there are enough free sample plugins to do most of what you'll want. Buy Pro after you know what you're doing a bit better and are earning some money. Elementor's competitors are very expensive and intended for their own page templates. I think staying with Elementor is your best choice. You can find many FREE site templates instead of the free Hello Theme. The newer Themes/templates are optimized for everything and kept up to date so you'll always be in good shape.

2:44 then why is it when I change the image size on mobile view it change the desktop size as well?

Exactly what I needed!

can you please tell me why is changing design setting is phone or either tablet mode is also changing design\ setting in my laptop mode in elementor pro please reply

Thank you , this saved me ✅

Exactly what i needed

Why I don't have Align (5:33) and mobile dropdown in my content settings? also responsive mode - the way you view tablet and mobile here is different from mine, do I have other version or just missing something?

Классно получается. Почти как в Тильде))

The best thing you could do is allow for a range of breakpoints to be selected and then it doesn't change until it hits said break point. I don't want my screen scaling indefinitely until it hits that breakpoint, it is obnoxious and goofy AF

Hello. You say that the computer version modify the tablet and phone version but when I change directly the mobil version it also change the computer version ? Why that ? tutorials on youtube always say "how easy it is " to change differents version but it is a nightmare until now for me. Nobody explain why there are changes on computer version without wanting it.

tk u i clearly understand

Hello, can you give me the page demo..i want to practise it.

GUYS PLEASE, NEW UPDATE RUINED RESPONSIVE LAYOUT, I CANT STRECH IT DOWN TO SEE WHAT IM EDITING. ITS SO SO BAD :( WHAT CAN I DO?

Very benefits, thank you. But i've a question :When i edit the mobile responsive, the tablet and desktop responsive change too. What to do for this case? Please help me Thank you

How do you maintain the same desktop style for multiple desktop resolutions?

I do not have Elementor Pro so there is no Global option. In Customizer the only options are pix now EM option for text.

Thank you!

Hello. I am unable to select the header. I have PRO and am using Hello theme. Please advise?

I cant see the viewport icon on the alignment, and it's a dropdown menu too, not buttons. Im ussing Version 3.10.1 free ver

I have a question, why when I use "Icon list" It only can be seen on pc devices, not on phone devices?

Hi there! Please tell me how to drag and drop in mobile ?

Great tutorial 😁

Love from Bangladesh, 💝

My Elementor dont have this frame that looks like a smartphone or tablet.. does anyone knows how set it ?

Please, different settings for different devices can you have just with pro version? Not with elementor basic? Because I tried to get responsive for mobile but edit get also in desktop and in the other way around so no different responsive for different devices

i hope you should give demo website or image and content.

when i change it in any section it does changes as well and effects my desktop view

I have Elementor PRO, but I cannot edit in my header. Is this because of my Theme use?

all fine and neat!! But what with Computer Desktop vs Laptop????? elementor gives us option to between desktop, tablet and mobile but there should be a option to for laptops. because most of all the webdesigner work on computers with bigger screen .

Doesn't work for me... I change the width column value and nothing happens... still the same... :( I don't get how to fix this...

HELLO... I listened to your video regarding editing Desktop, tablet, and smartphone formats. Your video states that editing the format on a smartphone does not affect formatting on a desktop. This is not what happened. Changing the position of an image in phone mode messed up all my formatting on my tablet and desktop. I'm running Elementor on an Astra theme thats been gutted of any interference. What do you suggest?

All fun and games, only that almost none of the options or elementor menu is the same anymore. So this video is kind of useless at this point

Great Video

How to make sure that text is not too small in mobile view

Everytime I edit for mobile phone, it also changes my desktop site. I'm so extremely frustrated with this.

Thank u❤️

It's a great template example. What is its name in elementor pro. I am the pro member.

no it's not right if am changing any thing in mobile view it gets changed in laptop and tablet also which disoriented the structure of complete website i tried every way i am out of ideas how can i fix this issue

..and when I finally reached a chat person at Elementor support, they said they couldn't help me unless I was going to make a purchase.

Any idea why after i did mobile edits, my desktop still got totally messed?

thanks to elementor for 11:30

wow well explained

Change Nav Menu to Flyout instead Dropdown. Need a flyout

GREAT!

I just moved a bunch of stuff for mobile responsiveness and everything changed in my website..............................................

great! subscribed!

When I change something on the tablet mode, say move a section because it's positioned wrong and text is bunched up it then moves on the desktop. How do you move and position sections so they aren't all over the place. too long and why does the featured image become too large. I thought Elementor was intelligent when you change modes? Why is this happening? I'm getting frustrated using Elementor. In theory it sounds great but in practice not so much.

Whatever happened to ‘Cathy from Elementor’?

It’s like guitar hero for musical instruments

great

What about basic menus for food? any links? to make a basic food menu>

The new Loop grid does not active responsivley.

💌

make a flexible carousel

you need to update the video

Wow Elementor is NOT intuitive and has slowed my process by triple the time...very buggy as well. Going back to good ol' basics.

aaaargh I a not seeing this panel toolbar you are talking a bout.