Application Position and CSS Adjustments

Application Position and CSS Adjustments

Adjust the position of the application by pixels or overlay custom CSS.


Customize the placement or appearance of the application

  1. Log in to the platform.
  2. Scroll down to and click the Behaviors & Styles tab in the navigation menu, then click Custom Color.
  3. The App Details page opens.
  4. Click the "Edit" button.
  5. Scroll to the App Adjustments section.
  6. Position Adjustments (in pixels): Make custom or more precise adjustments to the placement of the widget on desktop browsers. 
    1. Top: Add a value in this field to increase the distance between the widget and the top of the page. A negative value will decrease the distance between the widget and the top of the page. Example: Add a value to push the widget down to make a menu or navigation bar visible.
    2. Bottom: Add a value in this field to increase the distance between the widget and the bottom of the page. A negative value will decrease the distance between the widget and the bottom of the page. Example: Add a value to raise the widget from the bottom of the page to make logos and links visible.
    3. Left: Add a value in this field to increase the distance between the widget and the left side of the page. A negative value will decrease the distance between the widget and the left side of the page. Example: Add a value to push the widget away from the left side of the page and toward the right side to make logos and links visible.
    4. Right: Add a value in this field to increase the distance between the widget and the right side of the page. A negative value will decrease the distance between the widget and the right side of the page. Example: Add a value to push the widget away from the right side of the page and toward the left side to make logos and links visible.
  7. CSS Adjustments: Add CSS to make changes to the placement or visibility of the widget on desktop browsers.  
  8. Mobile Device Position Adjustments (in pixels): Make custom or more precise adjustments to the placement of the widget on mobile browsers.
    1. Top: Add a value in this field to increase the distance between the widget and the top of the page. Example: Add a value to push the widget down to make a menu or navigation bar visible.
    2. Bottom: Add a value in this field to increase the distance between the widget and the bottom of the page. Example: Add a value to raise the widget from the bottom of the page to make logos and links visible.
    3. Left: Add a value in this field to increase the distance between the widget and the bottom of the page. Example: Add a value to raise the widget from the bottom of the page to make logos and links visible.
    4. Right: Add a value in this field to increase the distance between the widget and the bottom of the page. Example: Add a value to raise the widget from the bottom of the page to make logos and links visible.
  9. CSS Adjustments: Add CSS to make changes to the placement or visibility of the widget on mobile browsers.  
  10. Click Save.

    • Related Articles

    • Appointment Availability and Location

      The Schedule Genie™ module references an Availability schedule created within the platform or an external CRM calendar to determine a company's hours of operation. These hours are included in the Schedule Genie™ calculation to determine the start and ...

    • Application Code

      Paste the Application Code on each page of your website where the app should appear. Viewing the App Code Log in to the platform. Scroll down to and click the Customize tab on the side menu. The App Customization page opens. Select the Advanced ...

    • Offer and App Settings

      Incentivize website visitors by creating compelling offers. Add Offer Details Log in to the platform. Scroll down to and click the Apps tab in the navigation menu, then click Spotlight. The Spotlight page with existing offers opens in the main ...

    • App Order

      Select the apps to be displayed on the company's desktop or mobile websites and the order in which the apps appear. Make Active Apps Visible on a Website Log in to the platform. Select Customize in the navigation menu. The App Details page opens. ...

    • Customize Page Overview

      Customize the style, design, color, and animation of the widget to match company branding. Change How the Modules Appear on a Website Log in to the platform. Scroll down to and click the Customize tab in the navigation menu. The App Customization ...