3-column div not adjusting to viewport when containing category blog

Confirmed Issue #10511207 • Assigned to Bogdan B.

Details

Author
Gillian S.
Created
Jan 12, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
14.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

To create a Pinterest-style category blog layout on a Joomla 3.6 website I followed these steps:

  1. Create menu item of type category blog with a single-column display
  2. 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.]
  3. 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.)

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in