{"id":6702,"date":"2026-07-12T12:12:25","date_gmt":"2026-07-12T19:12:25","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6702"},"modified":"2026-08-01T15:00:57","modified_gmt":"2026-08-01T22:00:57","slug":"content-width","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/docs\/content-width\/","title":{"rendered":"Content Width"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Suede uses two WordPress layout settings to define the maximum widths for standard and wide content throughout the theme:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>contentSize<\/strong>, which establishes the default width for blocks in both the editor and the front end<\/li>\n\n\n\n<li><strong>wideSize<\/strong>, which activates the wide-width feature and sets the width for wider blocks<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Suede defines content width using two layout settings: <strong>contentSize<\/strong> and <strong>wideSize<\/strong>. By default, these values are set to 640px and 1280px, respectively. Both settings can be customized by editing <strong>theme.json<\/strong> directly or through the WordPress Site Editor without writing code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Set Content Width (Code)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Below is the code used to set content widths in&nbsp;theme.json:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"640px\",\n\t\t\t\"wideSize\": \"1280px\"\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Additionally, fluid typography settings should changed to match:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"fluid\": {\n\t\t\t\t\"maxViewportWidth\": \"1280px\",\n\t\t\t\t\"minViewportWidth\": \"640px\"\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Set Content Width (No-Code)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Go to Appearance &gt; Editor &gt; Styles &gt; Layout, and you will see a panel like the one below. Change the values for Content and Wide as desired.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"1400\" src=\"https:\/\/briangardner.com\/suede\/wp-content\/uploads\/sites\/2\/suede-content-width.webp\" alt=\"Layout controls to set content width in Suede WordPress theme\" class=\"has-border-color has-contrast-border-color wp-image-6756\" style=\"border-width:1px\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Suede uses two WordPress layout settings to define the maximum widths for standard and wide content throughout the theme: Suede defines content width using two layout settings: contentSize and wideSize. By default, these values are set to 640px and 1280px, respectively. Both settings can be customized by editing theme.json directly or through the WordPress Site [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6655,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"simple_seo_seo_title":"Suede Content Width \u2013 Brian Gardner","simple_seo_seo_description":"Explore how Suede defines content width and learn how to customize contentSize and wideSize through theme.json or the Site Editor.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-6702","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=6702"}],"version-history":[{"count":3,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6702\/revisions"}],"predecessor-version":[{"id":6757,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6702\/revisions\/6757"}],"up":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6655"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=6702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}