{"id":38545,"date":"2025-04-22T12:57:46","date_gmt":"2025-04-22T16:57:46","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?post_type=reference-article&#038;p=38545"},"modified":"2025-04-22T12:57:53","modified_gmt":"2025-04-22T16:57:53","slug":"adding-custom-width-classes-to-blocks","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/adding-custom-width-classes-to-blocks\/","title":{"rendered":"Adding Custom Width Classes to Blocks"},"content":{"rendered":"\n<p>The NC State Theme uses a six-column (50%) width for its main body copy, but there are times when you may want content like embeds, social media feeds, or Smash Balloon content to extend beyond this default width. This can be achieved by adding custom CSS classes to your blocks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Available Width Classes<\/h2>\n\n\n\n<p>The NC State Theme supports two primary alignment classes that allow content to extend beyond the default content width:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>alignwide<\/code><\/strong>: Extends content to approximately 75% of the page width<\/li>\n\n\n\n<li><strong><code>alignfull<\/code><\/strong>: Extends content to the full width of the page (100%)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Custom Width Classes<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Select your block<\/strong>\u00a0in the WordPress editor by clicking on it<\/li>\n\n\n\n<li><strong>Open the block settings panel<\/strong>\u00a0by clicking the \u2699\ufe0f (gear) icon in the top-right corner of the editor<\/li>\n\n\n\n<li><strong>Scroll down to the &#8220;Advanced&#8221; section<\/strong>\u00a0in the settings panel<\/li>\n\n\n\n<li><strong>In the &#8220;Additional CSS class(es)&#8221; field<\/strong>, add either:\n<ul class=\"wp-block-list\">\n<li><code>alignwide<\/code>\u00a0for wider content (approximately 75% width)<\/li>\n\n\n\n<li><code>alignfull<\/code>\u00a0for full-width content (100% width)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Update or publish<\/strong>\u00a0your page to see the changes<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Recommended Use Cases<\/h2>\n\n\n\n<p>These alignment classes work particularly well with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Social Media Embeds<\/strong>: Make Facebook, Twitter, or Instagram embeds more prominent<\/li>\n\n\n\n<li><strong>Smash Balloon Content<\/strong>: Allow Instagram or other social feeds to display at a larger width<\/li>\n\n\n\n<li><strong>Video Embeds<\/strong>: Give YouTube or Vimeo videos more screen real estate<\/li>\n\n\n\n<li><strong>Table Blocks<\/strong>: Make wide tables more readable by extending beyond the normal content width<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Adding a Wide Class to Smash Balloon<\/h2>\n\n\n\n<p>When embedding Smash Balloon Instagram feeds using the Shortcode block:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add the Shortcode block to your page<\/li>\n\n\n\n<li>Paste your Smash Balloon shortcode (e.g.,\u00a0<code>[instagram-feed]<\/code>)<\/li>\n\n\n\n<li>Select the block<\/li>\n\n\n\n<li>Open the block settings panel<\/li>\n\n\n\n<li>In the &#8220;Additional CSS class(es)&#8221; field, add\u00a0<code>alignwide<\/code><\/li>\n\n\n\n<li>Update your page<\/li>\n<\/ol>\n\n\n\n<p>This will make your Instagram feed extend beyond the default content width, creating a more visually impactful display.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Notes and Best Practices<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use\u00a0<code>alignwide<\/code>\u00a0for a balanced approach that extends content without taking up the entire page width<\/li>\n\n\n\n<li>Use\u00a0<code>alignfull<\/code>\u00a0sparingly, as it creates edge-to-edge content that might feel disconnected from your other content<\/li>\n\n\n\n<li>Test your changes on both desktop and mobile devices to ensure responsive behavior<\/li>\n\n\n\n<li>Some blocks may already have built-in alignment options that should be used instead of CSS classes<\/li>\n<\/ul>\n\n\n\n<p>If you need further assistance with custom width options, please reach out to the web team at&nbsp;<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"","ncst_dynamicHeaderData":"","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[105],"class_list":["post-38545","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-special-configuration"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":2,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38545\/revisions"}],"predecessor-version":[{"id":38791,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/38545\/revisions\/38791"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=38545"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=38545"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=38545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}