# Using Sendbird Class Names for Desktop and Mobile Layouts

**URL:** <https://community.sendbird.com/t/using-sendbird-class-names-for-desktop-and-mobile-layouts/9577>\
**Category:** Sendbird Chat UIKit\
**Tags:** javascript, uikit, question\
**Created:** [May 26, 2024, 8:39am UTC](https://community.sendbird.com/t/using-sendbird-class-names-for-desktop-and-mobile-layouts/9577 "2024-05-26T08:39:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![roch2807](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/roch2807/32/5212_2.png) [@roch2807](https://community.sendbird.com/u/roch2807)\
**Post date:** [May 26, 2024, 8:39am UTC](https://community.sendbird.com/t/using-sendbird-class-names-for-desktop-and-mobile-layouts/9577/1 "2024-05-26T08:39:59Z")

</div>

Hi,

I’m currently integrating the Sendbird module components for building an inbox and conversation view in my application. I have two separate layouts for desktop and mobile views. I noticed that the Sendbird documentation provides specific class names (like `sendbird-app __wrap` and `sendbird-app__ conversation-wrap`) for styling.

Here are some snippets from my code:

**Desktop Layout:**

```javascript
import Conversation from '../../features/conversation';

const DesktopLayout = () => {
  return (
    <div className="sendbird-app__wrap">
      <Inbox />
      <div className="sendbird-app__conversation-wrap">
        <Conversation />
      </div>
    </div>
  );
};

export default DesktopLayout;

```

**Mobile Layout:**

```javascript
import { useGetSelectedChannelFromURL } from '../../hooks/use-get-selected-channel-by-url';

const MobileLayout = () => {
  const selectedChannelID = useGetSelectedChannelFromURL();
  return (
    <div className="mobile-layout">
      {selectedChannelID ? (
        <div className={styles.conversationBox}>
          <Conversation />
        </div>
      ) : (
        <Inbox />
      )}
    </div>
  );
};

export default MobileLayout;

```

My question is:

1. Do we need to use the specific Sendbird class names (`sendbird-app __wrap`, `sendbird-app__ conversation-wrap`, etc.) to style the components as intended by Sendbird?\*\*properly

2. Is there any flexibility to customize these class names or should we strictly adhere to the provided ones for consistency and proper functioning?

3. Are there any best practices or recommended approaches when using these modules for different layouts (desktop vs. mobile)?

Thank you in advance for your guidance!