Skip to content

Product Description

Styles for a product description used in product_description module.

Structurally .product-description contains following elements:

  • .product-description__header
  • .product-description__content

LESS

You can modify any product description less variable in your User Less section to change a product description styles.

Product Description variables

Variables used to style a product description.

@productDescriptionHeaderMarginBottomMobile: 16;

If you want to change product description styles, you can just change the variables. To change a default max-width of the description content just modify @productDescriptionContentMaxWidth variable.

@productDescriptionContentMaxWidth: 200;

Product Description styles

Here are standard product description styles.

.product-description {
    &__content {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: (@breakPointXs - 1)) {
    .product-description {
        &__header {
            .pixel-to-rem(margin-bottom, @productDescriptionHeaderMarginBottomMobile);
        }
    }
}

Modules reference