Short description of issue
CSS grid wrapper layout may be broken by long words in children.
Link to Shopify Store
Reproduction steps
Product page “Page info” section has a display: grid; wrapper.
On moderate desktop screens it uses this layout:
@media screen and (min-width: 750px) {
.product-information__grid:not(.product-information--media-none).product-information--media-left {
grid-template-columns: 1fr min(50vw, var(--sidebar-width)); /* uses min, does not have problem */
}
}
However, on wider screens it becomes:
@media screen and (min-width: 1200px) {
.product-information__grid:not(.product-information__grid--half,.product-information--media-none).product-information--media-left {
grid-template-columns: 2fr 1fr; /* uses fr only, prone to problem */
}
}
And here it may hit the bug – CSS grid doesn't support word-wrap, overflow-wrap and hyphens properties · Issue #46 · rachelandrew/gridbugs · GitHub (has some workarounds)
If product description contains very long word, grid layout is calculated as if it never wraps.
Store owner copy-pasted a text containing instead of spaces into product description.
Additional info
Horizon is ver 4.1.1, code is this:
Decided to post it here since may be of value to other theme developers using CSS grids.
@Alan_G – sorry for pinging you, but since I only have dev stores, can’t leave a review for Horizon in theme store.
What type of topic is this
Bug report
General discussion