{"id":117116,"date":"2023-02-07T09:42:14","date_gmt":"2023-02-07T09:42:14","guid":{"rendered":"https:\/\/wpsimplefix.com\/?p=117116"},"modified":"2026-09-24T17:41:58","modified_gmt":"2026-09-24T17:41:58","slug":"elementor-container-boxed-class","status":"publish","type":"post","link":"https:\/\/chkserv.com\/blog\/elementor-container-boxed-class\/","title":{"rendered":"Modify Elementor Container Boxed Class"},"content":{"rendered":"<p>In <a href=\"https:\/\/be.elementor.com\/visit\/?bta=207785&amp;nci=5383\" target=\"_blank\" rel=\"nofollow noopener\">Elementor<\/a>, you may modify the container width site-wide to make your website responsive to any screen resolution or device. The width property of the container class can be set using CSS. Several breakpoints can also be added.<\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"590\" height=\"821\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/elementor-burger-button.png\" alt=\"elementor-burger-button\" loading=\"lazy\" srcset=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/elementor-burger-button.png 590w, https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/elementor-burger-button-216x300.png 216w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><br \/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"592\" height=\"796\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/elementor-site-settings.png\" alt=\"elementor-site-settings\" loading=\"lazy\" srcset=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/elementor-site-settings.png 592w, https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/elementor-site-settings-223x300.png 223w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<ul>\n<li>Go to <a href=\"https:\/\/chkserv.com\/blog\/blog\/wordpress-custom-css-codes\/\" target=\"_blank\" rel=\"noopener\">Custom CSS<\/a><\/li>\n<\/ul>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"597\" height=\"611\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/site-wide-css-settings.png\" alt=\"site-wide-css-settings\" loading=\"lazy\" srcset=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/site-wide-css-settings.png 597w, https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/site-wide-css-settings-293x300.png 293w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<ul>\n<li>Then copy the following into the global CSS settings.<\/li>\n<li>Then save changes.<\/li>\n<\/ul>\n<pre data-line=\"\">\n\t\t\t\t<code readonly=\"true\">\n\t\t\t\t\t<xmp>\/* CONTAINER BOXED LAYOUT*\/\n\/* Ultra wide *\/\n@media (max-width: 3840px) {\n.c-box {--content-width: 55%;}}\n\/* Desktop *\/\n@media (max-width: 1920px) {\n.c-box {--content-width: 65%;}}\n\/* Laptop big *\/\n@media (max-width: 1600px) {\n.c-box {--content-width: 74%;}}\n\/* Laptop small *\/\n@media (max-width: 1366px) {\n.c-box {--content-width: 77%;}}\n\/* Tablet portrait *\/\n@media (max-width: 1200px) {\n.c-box {--content-width: 80%;}}\n\/* Mobile *\/\n@media (max-width: 767px) {\n.c-box {--content-width: 85%;}}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n<p>If you need to, you can then customise the width settings to your needs.<\/p>\n<h2>Turn off extended site padding<\/h2>\n<p>You will need to turn off extended site padding. You can do this under site settings, but got to Layout. Then make sure the container padding is all set to <strong>0 <\/strong>and unlinked. Then save changes.<\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"596\" height=\"689\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/site-settings-layout.png\" alt=\"site-settings-layout\" loading=\"lazy\" srcset=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/site-settings-layout.png 596w, https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/site-settings-layout-260x300.png 260w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><br \/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"743\" height=\"840\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/layout-container-padding.png\" alt=\"layout-container-padding\" loading=\"lazy\" srcset=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/layout-container-padding.png 743w, https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/layout-container-padding-265x300.png 265w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<h2>How to activate it?<\/h2>\n<p>Edit every container.<\/p>\n<ul>\n<li>Under layout, remove the width number.<\/li>\n<\/ul>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"597\" height=\"445\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/section-container-width.png\" alt=\"section-container-width\" loading=\"lazy\" srcset=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/section-container-width.png 597w, https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/section-container-width-300x224.png 300w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<p>You will need to go to the <strong>advanced tab<\/strong> on every container ( including the header and footer ) and place <strong>c-box<\/strong> in the css classes. Then it will use that class.<\/p>\n<p>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"597\" height=\"896\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/advanced-c-class-box.png\" alt=\"advanced-c-class-box\" loading=\"lazy\" srcset=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/advanced-c-class-box.png 597w, https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/02\/advanced-c-class-box-200x300.png 200w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/p>\n<h2>Conclusion<\/h2>\n<p>You can develop a website that not only looks fantastic on different devices but also provides a smooth and flexible user experience by customising the container width and utilising the responsive editing tools in Elementor.<\/p>\n<p>You can quickly alter the container width with Elementor&#8217;s easy interface to maintain a consistent layout across different devices. Therefore, visitors to your site using PCs, tablets, or mobile phones will have an optimised surfing experience that does not need them to zoom or scroll unnecessarily.<\/p>\n<p>This mobile-friendly design improves not only user satisfaction but also SEO performance, as search engines prioritise responsive websites. All of this is possible with Elementor without the need for substantial code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Elementor, you may modify the container width site-wide to make your website responsive to any screen resolution or device. The width property of the container class can be set using CSS. Several breakpoints can also be added. Go to Custom CSS Then copy the following into the global CSS settings. Then save changes. \/* [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":116313,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[64,65,66,49,14],"class_list":["post-117116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-boxed","tag-class","tag-container","tag-custom","tag-elementor"],"_links":{"self":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/117116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/comments?post=117116"}],"version-history":[{"count":1,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/117116\/revisions"}],"predecessor-version":[{"id":136761,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/117116\/revisions\/136761"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media\/116313"}],"wp:attachment":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media?parent=117116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/categories?post=117116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/tags?post=117116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}