Minor Issue: Explore Feeds and Manage Privacy at bottom of page

[ArmstKP]

Does anybody know why these two things have blow rectangles around them at the bottom of my Hub page?  Anybody ever seen this, or any other color?

[KlaraSchmitt]

Do you have any custom CSS on your page in Text Cards or in your header that affects buttons or perhaps uses a !important? That looks like the result of custom CSS being applied to generic selectors without enough specificity.

[ArmstKP]

@KlaraSchmitt I do have custom CSS for one button on the page.  I thought that would only effect that object or section of code, not the Explore Feeds and Manage Privacy section...?

[KlaraSchmitt · Accepted solution]

@ArmstKP 

Embedded styles within the Text Card are not contained to the Text Card; they will apply to the entire page if your selectors are generic. Our application uses a lot of the common HTML elements, so that is likely what is happening if you've attached styles to the button element. You can prevent this from happening by adding a unique class name to the row containing your Text Card and then referencing that row in your CSS to limit how the styles are applied.

Example of generic selector usage
button {background-color: blue; color: gray}

Example of targeted selector using row class
.uniqueRowClassName button {background-color: blue; color: gray}