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

Confirmed Issue #10511207 • Assigned to Bogdan B.


Gillian S.
Jan 12, 2017
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
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.)


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Bogdan B.”

      Changed Status to “Confirmed”

    • I eventually fixed this myself by adding this code to the css:
      .three-cols {
      columns: 3 395px;
      column-gap: 15px;
      max-width: 100%;
      .three-cols .items-row {
      break-inside: avoid-column; /* required for Chrome & Opera/
      .three-cols .item {
      break-inside: avoid-column; /
      required for Edge & IE */
      and adding " three-cols" (with leading space) to the Joomla page class in the ‘Page Display’ of the menu item.

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

    Sign in