#20925 [Chrome] Cards inside .card-columns stack differently #22378
Conversation
scss/_card.scss
Outdated
| page-break-inside: avoid; // Cards shouldn't span multiple columns. | ||
| break-after: always; // Gets rid of the floating margin. | ||
| -webkit-column-break-after: always; | ||
| page-break-after:always; // Gets rid of the floating margin in firefox. |
There was a problem hiding this comment.
Colon after property should be followed by at least one space
scss/_card.scss
Outdated
| @@ -268,9 +268,17 @@ | |||
| column-gap: $card-columns-gap; | |||
|
|
|||
| .card { | |||
| display: inline-block; // Don't let them vertically span multiple columns | |||
| width: 100%; // Don't let their width change | |||
| -webkit-column-break-inside: avoid; | |||
There was a problem hiding this comment.
Properties should be ordered margin-bottom, -webkit-column-break-inside, break-inside, page-break-inside, break-after, -webkit-column-break-after, page-break-after
scss/_card.scss
Outdated
| @@ -268,9 +268,18 @@ | |||
| column-gap: $card-columns-gap; | |||
|
|
|||
| .card { | |||
| display: inline-block; // Don't let them vertically span multiple columns | |||
| width: 100%; // Don't let their width change | |||
| -webkit-column-break-inside: avoid; | |||
There was a problem hiding this comment.
Properties should be ordered width, margin-bottom, -webkit-column-break-inside, break-after, break-inside, -webkit-column-break-after, page-break-after, page-break-inside
|
Have any explanation for the changes? Or a JS Bin demo of the before/after? |
|
{Deleted for better example to come.} |
|
Never saw an updated example, and given the lack of context here, I'm going to close this out for now. Happy to revisit in the future with an example that explains the changes! |
#22378