BugWP logo BugWP
Back to Community
Home / Community / Plugin → Wp shortcodes plugin — shortcodes ultimate

Fixing Common Column and Layout Issues in Shortcodes Ultimate

26 threads Sep 16, 2025 Plugin → Wp shortcodes plugin — shortcodes ultimate

Content

Many users of the 'WP Shortcodes Plugin — Shortcodes Ultimate' encounter issues with column layouts, especially when it comes to spacing, alignment, and mobile responsiveness. These problems can make your content look broken or unprofessional. This guide will walk you through the most common causes and their solutions.

Common Column Layout Problems

Based on community reports, the most frequent issues include:

  • Columns stacking vertically on mobile instead of staying side-by-side
  • Unwanted margins or gaps between columns, particularly on smaller screens
  • Content misalignment within columns after a plugin update
  • Difficulty overriding the plugin's default CSS styles

Why These Issues Happen

These problems typically arise from one of three sources:

  1. Theme Conflicts: Your active WordPress theme might have CSS rules that conflict with or override the styles from Shortcodes Ultimate.
  2. Plugin Updates: The Shortcodes Ultimate team occasionally updates the plugin's internal CSS, which can change how your existing shortcodes are displayed.
  3. Mobile Responsiveness: The plugin includes built-in CSS media queries that change column behavior on mobile devices, which can sometimes produce undesirable results.

Solutions and Workarounds

1. Fixing Mobile Stacking and Margin Issues

A common problem is unwanted margins between stacked columns on mobile. The plugin adds a top margin to columns on small screens. To remove it, add this CSS code to your theme's "Additional CSS" section or the Custom CSS field in Shortcodes Ultimate's settings:

@media only screen and (max-width: 767px) {
  .su-row .su-column + .su-column {
    margin-top: 0 !important;
  }
}

2. Correcting Vertical Alignment Issues

If your column content isn't aligning properly vertically, try this CSS approach. First, add a custom class to your column shortcode:

[su_column size="1/3" class="vertical-align"]Your content[/su_column]

Then, add this CSS to your theme:

.vertical-align {
  display: flex;
  align-items: center;
}

3. Ensuring Proper Column Widths

If your columns aren't displaying at the correct widths, especially after an update, you can force specific widths with CSS:

.su-column-size-1-2 { 
  width: 50% !important; 
}
.su-column-size-1-3 { 
  width: 33.333% !important; 
}

4. Testing for Theme Conflicts

To determine if your theme is causing the issue, temporarily switch to a default WordPress theme like Twenty Twenty-One. If the columns display correctly with the default theme, you'll need to add more specific CSS to your theme to resolve the conflict.

Best Practices for Using Column Shortcodes

  • Always test your layouts on both desktop and mobile views
  • Use the Custom CSS field in Shortcodes Ultimate settings for your overrides
  • Keep your plugin updated, but test thoroughly after each update
  • Consider using simpler column structures when possible

While these solutions address most common column issues, some layout challenges may require more specific CSS adjustments based on your unique theme and content structure.

Related Support Threads Support