CSS - Other

Super Centered

display: grid;
place-items: center;

Truncates text at a specific number of lines

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;


-webkit-line-clamp specific the maximum number of line you want to display.

Units in CSS

Absolute

  • Absolute length units are fixed and length will appear as exactly that size.
  • Absolute length units are not recommended for use on screen, because screen sizes vary so much.


Absolute Units

  1. cm - centimeters
  2. mm - millimeters
  3. in - inches (1 in = 96 px = 2.54 cm)
  4. px - pixels (1 px = 1/96th of 1 in)
  5. pt - points (1 pt = 1/72 of 1 in)
  6. pc - picas (1 pc = 12 pt)


Relative

  • Relative length units specify a length relative to another length property.
  • Relative length units scales better between different rendering mediums.


Relative Units

  1. em - Relative to the font-size of the element.
  2. ex - Relative to the x-height of the current font.
  3. ch - Relative to width of the '0' (zero).
  4. rem - Relative to font-size of the root element.
  5. vw - Relative to 1% of the width of the viewport.
  6. vh - Relative to 1% of the height of the viewport.
  7. vmin - Relative to 1% of viewport's smaller dimension.
  8. vmax - Relative to 1% of viewport's larger dimension.
  9. % - Relative to the parent element.

Validation Summary CSS not rendered

.validation-summary-errors {
    position: relative;
    padding: 1rem;
    color: #C2001B;
    background-color: #FFBCC6;
    border: #FFBCC6;
    border-radius: 0.375rem;
}

.validation-summary-errors span{
    font-weight: bold;
}

.validation-summary-errors ul {
    margin: 0;
}

.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

.form-control.input-validation-error {
    border: 1px solid #b94a48;
    border-color: #B94A48 !important;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-valid {
    display: none;
}