Mobile "Call Now" Button

  • Updated

On the listing detail page, on mobile devices, not including iPads/Tablets, you will notice that under the CTA buttons (Ask a Question and Schedule a Tour) there is a 'Call Now' button which displays the display phone number set up from the General Settings, as illustrated below:


Screen_Shot_2022-03-08_at_3.08.10_PM.png

Tip

Place the desired code(s) in the Custom CSS box under Settings > Design. You must clear your caches, then check your web page in an incognito browser to see the change!

 

Customization Options

  • The default background color of this button is green, instead of the blue for the CTAs to make it stand out on mobile. If you update this button, we suggest you make it a different color that stands out from the rest. of the buttons

    *To change the background color of the Call Now button:
    .sidx-container .sidx-button.sidx-primary-alt {
    background-color: #hexcode !important;
    }

  • The default text or font color is set to white.  The "color" line indicator of the code designates font color, and would be important to note if you changed other colors of the button. 

    *To change the font color of the Call Now button:
    .sidx-container .sidx-button.sidx-primary-alt {
    color: #hexcode !important;
    }
  • Padding changes how much space is insight the button, between the text and the border. The first number changes the top and bottom padding. The second number changes the left and right padding.

    *To change the padding of the Call Now button:
    .sidx-container .sidx-button.sidx-primary-alt {
    padding: 10px 15px !important;
    }
  • Border-radius changes the squareness of the button. The higher the number, the more round the button will be.

    *To change the border radius of the Call Now button:
    .sidx-container .sidx-button.sidx-primary-alt {
    border-radius: 20px !important;
    }

Applying Multiple Changes

*If you were to use all of the above properties to update your button, your code may look like this when placed into your design settings:


.sidx-container .sidx-button.sidx-primary-alt {
background: #hexcode !important;
color: #hexcode !important;
padding: 10px 15px !important
border-radius: 20px !important;
}

Warning: Showcase IDX may make future updates to the product which may break previously acceptable CSS code, causing that section on your website to look unusual.  If you've noticed your site not looking as expected, please return to this article for the updated CSS code.

If you are inexperienced with CSS, we suggest you turn to your developer as they will be the best contact person for CSS related questions and concerns.  We are not developers and provide this baseline CSS for agents and developers experienced in coding.