This PR can be summarized in the following changelog entry:
Fixes the Courses Overview layout in Internet Explorer 11
Relevant technical choices:
Examples updated:
changes the layout from CSS grids to flexbox
fixes an IE11 CSS flexbox bug
adds a max-width to only allow max 5 Cards per row
updates some of the examples containers so it's possible to use a full width container for the Courses Cards example
Details:
Although the layout change needs to be implemented in wordpress-seo too, the example needs to be updated as well. When switching to flexbox, a new IE11 bug appeared.
Summary
This PR can be summarized in the following changelog entry:
Relevant technical choices:
Examples updated:
Details: Although the layout change needs to be implemented in wordpress-seo too, the example needs to be updated as well. When switching to flexbox, a new IE11 bug appeared.
In IE 11, when flex items in a column direction have an height that is computed based on a scaled image. the item height is calculated on the height of the image before it gets scaled by the browser. See https://github.com/philipwalton/flexbugs#flexbug-5 Bug demo: https://codepen.io/philipwalton/full/LEbQON
Screenshot of the bug:
The blank space is given by the space the image would take before it gets scaled. Adding
overflow: hidden
to the image container fixes the bug.Test instructions
To test the standalone app in IE11:
2086-yoastseo-1440-breaks-yoast-components-in-ie11
yarn && yarn start
and go to localhost:3333Fixes https://github.com/Yoast/wordpress-seo/issues/11953