Steps to reproduce
To create a Pinterest-style category blog layout on a Joomla 3.6 website I followed these steps:
- Create menu item of type category blog with a single-column display
- Create menu item of type single article. Added multi-column div to the article specifying 3 columns and 325px as the minimum column width (columns: 3 325px;). [With plain text columns in the div adjust their width correctly when the browser window is narrowed and reduce to two columns and then one as the window narrows further.]
- Using Components Anywhere, inserted the category blog menu item code into the div in the article.
When viewing the result, all browsers display correctly in full-width BUT when viewing in Edge (and IE11) with browser window narrowed, the columns did not adjust their width or number but instead break out of the container. Similarly, when adding the menu item (1 above) to a custom html module, the columns didn’t adjust with a narrower window but instead were cropped inside the module.
Additionally, in IE11, the ‘page-break-inside avoid’ command is ignored so individual items are broken.
(p.s. tried to attach five - private - images showing different layouts but this caused a problem posting this issue.)
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Bogdan B.”
Changed Status to “Confirmed”