{"id":29134,"date":"2022-10-10T12:00:00","date_gmt":"2022-10-10T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=29134"},"modified":"2024-04-18T17:26:13","modified_gmt":"2024-04-18T14:26:13","slug":"responsive-design-using-containers","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/","title":{"rendered":"Create responsive design with containers"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Containers- Responsiveness\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/xI7Fh6PtXek?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif\" alt=\"\" class=\"wp-image-29135\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Direction<\/h2>\n\n\n\n<p>The direction of Containers may be set to Row or Column independently based on breakpoint. This allows widgets to stack easily on mobile view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"357\" height=\"691\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/Align-items-in-a-container.png\" alt=\"\" class=\"wp-image-49335\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/Align-items-in-a-container.png 357w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/10\/Align-items-in-a-container-155x300.png 155w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Width and Height properties<\/h2>\n\n\n\n<p>The Container allows you to alter the heights and widths of each&nbsp; element according to the breakpoint. By adapting your designs to be based on flexbox, you can use fewer custom breakpoints than previously needed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/image-1.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/image-1.png\" alt=\"\" class=\"wp-image-29138\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Ordering<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-default\"><a href=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/image-3.png\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/image-3.png\" alt=\"\" class=\"wp-image-29140\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Next steps<\/h2>\n\n\n\n<p>Now that you&#8217;ve seen how containers can help with responsive design, let&#8217;s look at how you can <a href=\"https:\/\/elementor.com\/help\/basic-layouts-using-the-container\/\">create some basic designs<\/a> with containers. <\/p>\n\n\n\n<p>To get the most out of<strong> Elementor,<\/strong> check out the <a href=\"https:\/\/elementor.com\/academy\/\">Elementor Academy<\/a> for helpful learning resources. If you come across any issues or need help, please contact our <a href=\"https:\/\/elementor.com\/support\/\">Support Center<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. Direction The direction [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["659eb08039bc7a1cb9781451"],"footnotes":""},"categories":[1443],"tags":[],"class_list":["post-29134","post","type-post","status-publish","format-standard","hentry","category-flexbox-containers"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create responsive design with containers | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Create responsive design with containers in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create responsive design with containers | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Create responsive design with containers in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-10T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-18T14:26:13+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Create responsive design with containers\",\"datePublished\":\"2022-10-10T09:00:00+00:00\",\"dateModified\":\"2024-04-18T14:26:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\"},\"wordCount\":228,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif\",\"articleSection\":[\"Flexbox containers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\",\"url\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\",\"name\":\"Create responsive design with containers | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif\",\"datePublished\":\"2022-10-10T09:00:00+00:00\",\"dateModified\":\"2024-04-18T14:26:13+00:00\",\"description\":\"Learn everything about Create responsive design with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Layout\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Flexbox containers\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Create responsive design with containers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create responsive design with containers | Elementor","description":"Learn everything about Create responsive design with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/","og_locale":"en_US","og_type":"article","og_title":"Create responsive design with containers | Elementor","og_description":"Learn everything about Create responsive design with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/","og_site_name":"Help","article_published_time":"2022-10-10T09:00:00+00:00","article_modified_time":"2024-04-18T14:26:13+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Create responsive design with containers","datePublished":"2022-10-10T09:00:00+00:00","dateModified":"2024-04-18T14:26:13+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/"},"wordCount":228,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif","articleSection":["Flexbox containers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/","url":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/","name":"Create responsive design with containers | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif","datePublished":"2022-10-10T09:00:00+00:00","dateModified":"2024-04-18T14:26:13+00:00","description":"Learn everything about Create responsive design with containers in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/responsive-design-using-containers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Responsive-Blog.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/responsive-design-using-containers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Layout","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/"},{"@type":"ListItem","position":4,"name":"Flexbox containers","item":"https:\/\/elementor.com\/help\/elementor-editor\/layout\/flexbox-containers\/"},{"@type":"ListItem","position":5,"name":"Create responsive design with containers"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=29134"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29134\/revisions"}],"predecessor-version":[{"id":49337,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/29134\/revisions\/49337"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=29134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=29134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=29134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}