How to Hide Page Elements Using CSS

If you would like to hide elements on your landing page that you aren't able to remove via Site Builder,  you can do so by customizing the theme for your site following the instructions below. 

How to Hide Landing Page Elements

1. Using Chrome, right-click on the page where you have an element you'd like to hide and choose Inspect, which opens up Chrome Developer Tools.
   
2. On the page, use the shortcut Command + Shift + C or click on the arrow icon in the upper right corner of the toolbox to enable the element selector.
   
   
3. Next, highlight the element you'd like to hide on the page to display the element in the developer toolbox
   
   
4. Copy the class. In the example above, the class would be course-card__price
5. Head to your theme code by going to Design your Site > Theme Library > Ellipses menu > Edit code.
6. In the theme editor, go to Styles > _overrides.scss.
7. On a new line, add in the following:
   

   .<insert-class-name-here> {
       display: none !important;
   }

   
   Using the example above, that would look something like this:
   

   .course-card_price {
      display: none !important;
   }

8. Click Save.