How to Add Custom CSS
You can style and customize any page of your website using custom CSS. Whether it’s changing the display or applying colors and fonts, custom CSS gives all the customization controls in your hand. In this article, we will use the Audio view page and hide the share options using custom CSS.
To begin, go to the Audio view page. Right-click anywhere on the page and click the inspect option.
Now, click the inspect-element icon situated in the top left corner of the inspect window.
With the inspect-element icon clicked, move the mouse and click on the div/element you want to change or add custom CSS for. As soon as you click on the div/element, you’ll see a line of code highlighted on the inspect window.
[Note: Ensure you click the right div/element. Clicking the wrong div might lead you to apply custom CSS on the wrong div.]
On the highlighted line, you’ll find the class name that you must copy to use in the custom CSS menu in your dashboard. In this case, the class name is “st-inline-share-buttons”.
[Note: You might not be able to copy the class name from the inspect window. So, write it down somewhere first and then copy it.]
Now, head over to the dashboard and go to Website builder -> Custom CSS.
Paste the class name on the editor and then you can write any CSS code to apply to the div/element that you selected. To hide an element, you can simply write, display: none; Click the Save button to apply the CSS.
If you find any CSS styling is not applied, then adding !important in your styling should solve the issue.
Example: display: none !important;
[Note: If multiple class names exist on the div/element then you can try each one at a time to see which one is working correctly. Also, use the dot (.) class selector before the class name.]
Also read: How to add a carousel on your website