BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty seventeen

Fixing Common Text and Layout Alignment Issues in Twenty Seventeen

15 threads Sep 16, 2025 Theme → Twenty seventeen

Content

Alignment problems are a frequent source of frustration for users of the Twenty Seventeen theme. These issues can manifest as text running off the edge of the screen, content shifting to one side, or elements not centering correctly, especially on mobile devices. Based on common community reports, this guide will help you diagnose and fix the most prevalent alignment problems.

Why Do Alignment Issues Happen?

Alignment problems in Twenty Seventeen typically stem from a few key areas:

  • Custom CSS Overrides: Well-intentioned custom CSS can sometimes conflict with the theme's responsive design, breaking layouts on certain screen sizes.
  • Plugin Conflicts: Plugins can inject their own styles that override the theme's alignment rules.
  • Browser-Specific Rendering: Some CSS properties may render differently across browsers, leading to inconsistent alignment.
  • Inherited Global Settings: A site language set to a right-to-left (RTL) script can cause the entire layout to shift.

Common Solutions for Alignment Problems

1. Check for a Right-to-Left (RTL) Language Setting

If your entire website is suddenly right-aligned, the first thing to check is your site's language setting. If it's set to a language like Arabic or Hebrew that reads right-to-left, it will shift your entire layout.

How to fix it: Navigate to Settings > General > Site Language in your WordPress dashboard and ensure it's set to a left-to-right language like English.

2. Isolate the Problem: Plugin or Theme?

To determine if a plugin is causing the misalignment, temporarily disable all your plugins. If the problem resolves, reactivate them one by one to identify the culprit. Common offenders are plugins that add related posts, tables, or event listings, as they often add their own CSS for alignment.

3. Use a Child Theme for Custom CSS

For any significant customization, using a child theme is the recommended best practice. However, for quick CSS fixes, the Appearance > Customize > Additional CSS section is a safe and effective place to add code, as it persists through theme updates.

4. Specific CSS Fixes for Known Issues

Here are some targeted CSS solutions for common alignment problems reported by the community. Add these to your Additional CSS section.

Fixing Bullet List Alignment:
By design, Twenty Seventeen lists have a different alignment. To revert to a more traditional indented look, use this code:

ul,
ol {
    list-style-position: inside;
}

Centering Content on a Static Front Page:
If your static front page content is not centering, try this CSS to override the default alignment:

.home .entry-content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

Improving Mobile Responsiveness for Columns:
If text in columns is not resizing properly on mobile, ensure your columns are built with a responsive method (like the Block Editor's Columns block) and add this CSS to improve text wrapping:

@media screen and (max-width: 768px) {
    .wp-block-columns {
        flex-wrap: wrap;
    }
    .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 1.5em;
    }
}

Conclusion

Most alignment issues in Twenty Seventeen can be resolved by methodically checking for plugin conflicts, reviewing custom CSS, and using targeted overrides. Always test your site on multiple devices after making changes to ensure the layout is responsive and looks correct for all users.

Related Support Threads Support