Code

Fix Finsweet CSS Styling Issues

This is used to normalize and reset any CSS used in the client-first system to correct any strange Webflow native issues as well as offer some additional functionality like truncating via CSS. This should be added to your global styles embed on your site.

How to add it

Create a global embed symbol and add this to all of the pages on your site. This helps keep global styles in line and one easy to manage location rather than having to add it to the Site Settings section.
Add the CSS code within this global embed

The code

Javascript

                          /* Snippet gets rid of top margin on first element in any rich text*/
    .w-richtext>:first-child {
        margin-top: 0;
    }

    /* Snippet gets rid of bottom margin on last element in any rich text*/
    .w-richtext>:last-child,
    .w-richtext ol li:last-child,
    .w-richtext ul li:last-child {
        margin-bottom: 0;
    }

    /* Snippet makes all link elements listed below to inherit color from their parent */
    a,
    .w-tab-link,
    .w-nav-link,
    .w-dropdown-btn,
    .w-dropdown-toggle,
    .w-dropdown-link {
        color: inherit;
    }

    /* Snippet prevents all click and hover interaction with an element */
    .clickable-off {
        pointer-events: none;
    }

    /* Snippet enables all click and hover interaction with an element */
    .clickable-on {
        pointer-events: auto;
    }

    /* Snippet enables you to add class of div-square which creates and maintains a 1:1 dimension of a div.*/
    .div-square::after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    /*Hide focus outline for main content element*/
    main:focus-visible {
        outline: -webkit-focus-ring-color auto 0px;
    }

    /* Make sure containers never lose their center alignment*/
    .container-medium,
    .container-small,
    .container-large {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /*Reset selects, buttons, and links styles*/
    .w-input,
    .w-select,
    a {
        color: inherit;
        text-decoration: inherit;
        font-size: inherit;
    }

    /*Apply "..." after 3 lines of text */
    .text-style-3lines {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /*Apply "..." after 2 lines of text */
    .text-style-2lines {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }