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

Fixing Responsive Column Layout Issues in WP Shortcodes Plugin

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

Content

Many users of the 'WP Shortcodes Plugin — Shortcodes Ultimate' encounter a common challenge: columns that display perfectly on desktop but break or misalign on mobile devices. This comprehensive guide will help you understand why this happens and provide practical solutions to create truly responsive layouts.

Understanding the Core Issue

The plugin's column system uses a responsive grid that automatically stacks columns vertically on mobile devices by default. However, several factors can interfere with this behavior:

  • Theme CSS conflicts that override the plugin's responsive styles
  • Custom CSS that isn't mobile-friendly
  • Missing or incorrect viewport meta tags
  • Specific column size combinations that don't adapt well to mobile

Common Solutions for Mobile Column Issues

Solution 1: Verify Basic Responsive Structure

First, ensure you're using the correct shortcode structure. The plugin requires proper nesting of [su_row] and [su_column] shortcodes:

[su_row]
[su_column size="1/2"]
Left column content
[/su_column]
[su_column size="1/2"]
Right column content
[/su_column]
[/su_row]

Solution 2: Add Mobile-Specific CSS Overrides

If columns aren't stacking properly on mobile, add this CSS to your theme's customizer or additional CSS section:

@media only screen and (max-width: 768px) {
.su-row .su-column {
width: 100% !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}

This CSS forces all columns to full width on screens smaller than 768px, ensuring proper stacking.

Solution 3: Adjust Column Spacing for Mobile

If you've modified column spacing that breaks on mobile, use responsive CSS:

@media only screen and (max-width: 768px) {
.su-row .su-column {
margin: 0 0 20px 0 !important; /* Adds space between stacked columns */
}
}

Solution 4: Fix Nested Column Issues

For complex layouts with nested rows and columns, ensure proper closing of all shortcodes and consider simplifying the structure for better mobile compatibility.

Advanced Customization: Different Layouts for Tablet and Mobile

For those needing different column arrangements across devices (3 columns on desktop, 2 on tablet, 1 on mobile), use this advanced CSS approach:

/* Default desktop styles (3 columns) */
.su-row .su-column-size-1-3 {
width: 32%;
float: left;
margin: 0 0 0 2%;
}

/* Tablet styles (2 columns) */
@media (max-width: 1024px) {
.su-row .su-column-size-1-3 {
width: 48%;
margin: 0 0 2% 2%;
}
.su-row .su-column-size-1-3:nth-child(2n+1) {
clear: left;
}
}

/* Mobile styles (1 column) */
@media (max-width: 768px) {
.su-row .su-column-size-1-3 {
width: 100%;
margin: 0 0 20px 0;
float: none;
}
}

Testing and Validation

After implementing any solution:

  1. Clear your website and browser cache
  2. Test on multiple mobile devices or use browser developer tools
  3. Check for JavaScript errors that might interfere with layout
  4. Verify your theme's viewport meta tag is present: <meta name="viewport" content="width=device-width, initial-scale=1">

By understanding how the plugin's responsive system works and applying these targeted solutions, you can create column layouts that look great on all devices. Remember that complex nested structures may require additional customization, and always test your changes thoroughly across different screen sizes.

Related Support Threads Support