BugWP logo BugWP
Back to Community
Home / Community / Theme → Onepress

How to Adjust Spacing and Padding in the OnePress Theme

25 threads Sep 16, 2025 Theme → Onepress

Content

One of the most common customization requests for the OnePress theme is adjusting the spacing between various elements. Whether it's the gap between your logo and a headline, the padding around sections, or the space between content and a sidebar, these tweaks are essential for achieving a polished, professional look. This guide will walk you through the most effective methods for controlling spacing using custom CSS.

Why Spacing Issues Occur

The OnePress theme, like many WordPress themes, is built with default padding and margin values to ensure it looks good on a wide variety of sites. However, these default values may not always align with your specific design vision or branding requirements. The good news is that these styles are controlled by CSS, which means they can be easily overridden without editing the theme's core files.

Common Spacing Adjustments and Their Solutions

1. Space Between a Logo and Headline

To add space between a site logo and a page title or headline beneath it, you can target the title's top margin.

.single .entry-header .entry-title {
    margin-top: 15px;
}

You can adjust the 15px value to increase or decrease the space to your liking.

2. Space Between Content and Sidebar

If your main content area feels too far from the sidebar, you can adjust the padding on the primary content container.

#primary {
    padding-right: 10px;
}

3. Reducing Padding Between Homepage Sections

The OnePress homepage is built with sections, each having default padding. To reduce the space above a specific section, you need to find its unique class and adjust its padding.

.section-padding {
    padding: 40px 0;
}

For more targeted control, you can address a specific section. For example, to reduce space above a contact section:

.section-contact {
    padding-top: 20px;
}

4. Space Above and Below a Logo

To create even spacing around your logo in the header, you can adjust the header's height. This will affect both the top and bottom.

.site-header {
    height: 75px;
}

How to Implement These CSS Changes

  1. In your WordPress dashboard, navigate to Appearance > Customize.
  2. Click on the Additional CSS tab.
  3. Paste one of the code snippets above into the CSS editor.
  4. Adjust the numerical values (e.g., 15px, 40px) until the spacing looks right on the live preview.
  5. Click Publish to save your changes.

Important Considerations

  • Use a Child Theme: For more advanced changes, especially those involving PHP (like modifying thumbnail sizes), it is highly recommended to use a child theme. This protects your customizations from being overwritten when the main theme is updated. The 'OnePress' team provides documentation on how to set this up.
  • Browser Developer Tools: Use your browser's inspect tool (often accessed by right-clicking and selecting 'Inspect') to identify the correct CSS classes and test changes in real-time before adding them to your site.

By using the custom CSS examples provided, you can gain precise control over the layout of your OnePress website and create a visually balanced design that meets your exact needs.

Related Support Threads Support