I found the problem. What you have to do is to add this code
@media screen and (max-width: 989px){
.product-short-description{
font-size: 11px;
}
}
at the start of the base.css or before it get’s overridden by other css.
Goal: Show a short text (metafield) under each product title in the Dawn 14.0.0 collection grid after moving the price to the quick add button.
Implementation:
{{ card_product.metafields.custom.product_short_description }}
(replace with your actual metafield key).Common pitfalls and fixes:
Styling (base.css):
Outcome: Both users successfully displayed and styled the metafield; desktop/mobile font sizes and spacing resolved. Discussion concluded with solutions working.
I found the problem. What you have to do is to add this code
@media screen and (max-width: 989px){
.product-short-description{
font-size: 11px;
}
}
at the start of the base.css or before it get’s overridden by other css.