Simple Ajax Chat Pro (SAC Pro) chat forms are designed responsively, so the box and form widths adjust depending on the width of the browser. For smaller screens, the chat box and form will display vertically; for larger screens they will display side by side. This super quick tutorial explains how to force vertical display always for all screens.

Tip: Just getting started with SAC Pro? Check out the Quick Start Guide »

Vertical display for all forms

To implement vertical display for all chat forms, visit the SAC Pro settings and add the following CSS to Appearance ▸ “Custom Style”:

#sacpro .sacpro .sacpro-box, #sacpro .sacpro .sacpro-form { float: none; width: 100%; margin: 0; padding: 10px; }

Save changes and done. With that code in place, all chat boxes/forms will display vertically always.

Vertical display for specific forms

With the previous CSS snippet, all chat boxes/forms will display vertically. To override for a specific form, first get the form ID (should match the form_id attribute on the form shortcode). Then use it to modify the previous CSS code. For example, if the form ID is GuestChat, we would add the following code:

#sacpro .sacpro#sacpro_GuestChat .sacpro-box, #sacpro .sacpro .sacpro-form { float: none; width: 100%; margin: 0; padding: 10px; }

Notice the only difference between this and the previous code. Here we change .sacpro to .sacpro#sacpro_GuestChat, which is the form ID prepended with sacpro_. This makes the CSS more specific, so that it applies only to form ID sacpro_GuestChat.

So to sum up:

  1. Our form ID is: GuestChat
  2. Prepend sacpro_ to get sacpro_GuestChat
  3. Replace .sacpro with .sacpro#sacpro_GuestChat in the above CSS
  4. Add the CSS to the SAC Pro setting, Appearance ▸ “Custom Style”
  5. Save changes and done.

Using the prefixed form ID, you can target and apply custom style to any specific chat form(s).