How to Remove Site’s Side Padding in Mobile View

Introduction

Mobile layouts often include side padding that can limit usable screen space on smaller devices. This guide explains how to remove site's side padding in mobile view, allowing your content to span the full width of the screen for a cleaner and more immersive mobile experience.

Custom Workaround

Before proceeding, make sure you have a complete site backup.

1. Go to BuddyBoss > Theme Options in your WordPress admin dashboard.
2. Open the Custom Codes section.
3. Enable CSS.
4. Add the following CSS code:

@media only screen and (max-width: 649px) {

    .container {

        padding: 0px;

    }

    .site-content,

    #bbpress-forums .activity-list.bp-list .activity-item,

    #buddypress .activity-list.bp-list .activity-item,

    #buddypress .activity-lists.bp-list .activity-item {

        padding: 0px;

    }

}

5. Click Save Changes.

Note: Any modifications like this are considered custom work. Please review the BuddyBoss Support Policy for details.

Troubleshooting and FAQs

Q: The side padding is still visible on mobile devices.
A: Clear your site cache and browser cache, then test again on a mobile device or using your browser’s mobile view.

Q: Will this affect desktop layouts?
A: No. This CSS only applies to screens with a maximum width of 649px.

Q: Can I restore the default padding later?
A: Yes. Remove the CSS code and save your changes.