Skip to main content
University Communications and Marketing
Web Platforms and Documentation

Adding Custom Width Classes to Blocks

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.

Available Width Classes

The NC State Theme supports two primary alignment classes that allow content to extend beyond the default content width:

  • alignwide: Extends content to approximately 75% of the page width
  • alignfull: Extends content to the full width of the page (100%)

How to Add Custom Width Classes

  1. Select your block in the WordPress editor by clicking on it
  2. Open the block settings panel by clicking the ⚙️ (gear) icon in the top-right corner of the editor
  3. Scroll down to the “Advanced” section in the settings panel
  4. In the “Additional CSS class(es)” field, add either:
    • alignwide for wider content (approximately 75% width)
    • alignfull for full-width content (100% width)
  5. Update or publish your page to see the changes

Recommended Use Cases

These alignment classes work particularly well with:

  • Social Media Embeds: Make Facebook, Twitter, or Instagram embeds more prominent
  • Smash Balloon Content: Allow Instagram or other social feeds to display at a larger width
  • Video Embeds: Give YouTube or Vimeo videos more screen real estate
  • Table Blocks: Make wide tables more readable by extending beyond the normal content width

Example: Adding a Wide Class to Smash Balloon

When embedding Smash Balloon Instagram feeds using the Shortcode block:

  1. Add the Shortcode block to your page
  2. Paste your Smash Balloon shortcode (e.g., [instagram-feed])
  3. Select the block
  4. Open the block settings panel
  5. In the “Additional CSS class(es)” field, add alignwide
  6. Update your page

This will make your Instagram feed extend beyond the default content width, creating a more visually impactful display.

Notes and Best Practices

  • Use alignwide for a balanced approach that extends content without taking up the entire page width
  • Use alignfull sparingly, as it creates edge-to-edge content that might feel disconnected from your other content
  • Test your changes on both desktop and mobile devices to ensure responsive behavior
  • Some blocks may already have built-in alignment options that should be used instead of CSS classes

If you need further assistance with custom width options, please reach out to the web team at go.ncsu.edu/ucomm-dev-request.