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

How to Fix Common Button Alignment and Spacing Issues with Shortcodes Ultimate

29 threads Sep 10, 2025 Plugin → Wp shortcodes plugin — shortcodes ultimate

Content

Buttons created with the Shortcodes Ultimate plugin are a popular way to add clear calls-to-action. However, a frequent challenge users face is controlling their alignment and spacing. This guide covers the most common layout problems and how to solve them.

Common Button Layout Issues

Based on community discussions, the most frequent layout-related problems include:

  • Buttons not aligning to the right or center as desired.
  • Buttons stacking vertically instead of appearing side-by-side.
  • Insufficient spacing above or below a button, causing it to look cramped against headings or text.
  • Buttons not displaying correctly on mobile devices.

How to Align Buttons (Left, Center, Right)

The Shortcodes Ultimate button shortcode itself does not have a dedicated alignment parameter. The most effective method is to control the alignment of the content around the shortcode.

Using the Visual Editor:
Many modern WordPress page builders (Gutenberg, WPBakery, Elementor) and the classic TinyMCE editor have built-in text alignment tools. Simply place your cursor on the line containing the shortcode and use the alignment button (often found in the toolbar) to set it to left, center, or right.

Using Custom HTML:
For more control, you can wrap your shortcode in HTML div or p tags with inline CSS. This is a reliable method that works in nearly any editor.

<p style="text-align: right;">
[su_button url="#" style="flat" size="9" radius="0" icon="icon: location-arrow"]Button right[/su_button]
</p>

To center a group of buttons, wrap them in a <center> tag:

<center>
[su_button]Button One[/su_button] [su_button]Button Two[/su_button]
</center>

How to Place Buttons Side-by-Side

If your buttons are stacking vertically instead of appearing on the same line, the issue is often automatic line breaks in the editor or the center="yes" parameter adding a block-level display.

Solution 1: Place shortcodes on one line.
Ensure both shortcodes are placed immediately next to each other in the Text or Code editor view, separated only by a space.

[su_button]Button text[/su_button] [su_button]Button text[/su_button]

Solution 2: Disable centering and wrap the group.
If you were using center="yes" on each button, remove it. Instead, apply centering to the entire group as shown in the method above.

<center>
[su_button] ... [/su_button] [su_button] ... [/su_button]
</center>

How to Add Spacing Around Buttons

A lack of margin (space) around a button can make a page look cluttered. This is often a theme-specific style issue.

Solution: Use Custom CSS.
The best way to add consistent spacing is with CSS. You can add this code to the Additional CSS section in your WordPress Customizer (Appearance > Customize > Additional CSS).

To add space below a button:

.su-button {
margin-bottom: 20px !important;
}

To add space above a button:

.su-button {
margin-top: 20px !important;
}

Adjust the 20px value to your preferred spacing.

Mobile-Specific Considerations

Layouts can change on mobile devices. If your side-by-side buttons stack on mobile, this is usually the intended behavior for a better touchscreen experience. Forcing horizontal scrolling requires advanced CSS and JavaScript, which is beyond the plugin's standard shortcode options.

Conclusion

Most button alignment and spacing issues can be resolved by understanding that the shortcode output is affected by the HTML content surrounding it. Using your editor's alignment tools or simple HTML/CSS wrappers provides the control needed for a professional layout. For more complex design changes, custom CSS is the most powerful tool at your disposal.

Related Support Threads Support