Elementor Responsive 101: All You Need to Know!

In this tutorial, we will go over the responsive features and options in Elementor. We’ll review the basics of responsive design, and optimize a website’s header, content, and footer, using Elementor's responsive section, column, and widget settings.

This tutorial will cover:

✔︎ Responsive features
✔︎ Responsive menu
✔︎ Responsive font styles
✔︎ Device-specific settings
✔︎ And much more!

Don’t forget to subscribe to our channel!

00:00 - 01:01 - Intro - What We’ll See in this Tutorial
01:02 - 04:08 - Elementor’s Responsive Features
04:09 - 05:59 - Responsive Menu
06:00 - 07:47 - Column Width & Wrapping
07:48 - 08:48 - Responsive Font Styles
08:49 - 09:34 - Hide and Show Elements on Different Devices
09:35 - 10:08 - Reverse Column Order in Different Viewports
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

[dougpopejoy]

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.

[leenabel]

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

[muhammadsaadmansoor]

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

[piotisnaturals]

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!

[vishvajeet]

Thank you very much. beautifully explained

[India.stories]

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

[cinthyaroura]

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

[vanclanfam]

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?

[AW-zcrf]

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?

[JUANPABLOSANTAMARIA]

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!

[LEARNCREATIVEART]

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

[nicselectronics]

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?

[Rejoin_]

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.

[moksha_wellness]

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.

[DerAtomtoast]

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

[ffllowow]

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.

[dr-stephennewdell]

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

[CR-rfe]

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

[lamayonzan]

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

[Altamash]

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!