help center

Search
Close this search box.
On this page

Create responsive design with containers

Last Update: April 18, 2024

Introduction

Containers make the best use of available space within them. This means your designs will look great across all devices with less need for additional breakpoints. The ability to resize and reorder individual elements within a section was only possible before with a lot of custom CSS or third party add-ons.

Responsive Blog Create responsive design with containers 1

Direction

The direction of Containers may be set to Row or Column independently based on breakpoint. This allows widgets to stack easily on mobile view.

Align items in a container Create responsive design with containers 3

Responsive Width and Height properties

The Container allows you to alter the heights and widths of each  element according to the breakpoint. By adapting your designs to be based on flexbox, you can use fewer custom breakpoints than previously needed.

image 1 Create responsive design with containers 5

Responsive Ordering

By using Custom Order, you may set the order of widgets and containers per breakpoint. This provides a much more optimized way to manage responsiveness in your designs. You may now avoid creating additional sections that are hidden per device.

image 3 Create responsive design with containers 7

Next steps

Now that you’ve seen how containers can help with responsive design, let’s look at how you can create some basic designs with containers.

To get the most out of Elementor, check out the Elementor Academy for helpful learning resources. If you come across any issues or need help, please contact our Support Center.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Is Your Site Mobile-Ready?

Our Responsive Design Service is here!

We’ll optimize 5 pages to ensure your site looks perfect on mobile and tablet.