Column Break - Grid Layout session has mistakenly added diff


Topic: Column Break - Grid Layout session has mistakenly added different example

chachushereef asked 5 years ago

Expected behavior enter image description here Actual behavior enter image description here Resources (screenshots, code snippets etc.)


Marta Szymanska staff pro premium answered 5 years ago

Hi,

these blue blocks are documentation examples to show how the grid works. With class .col-example within a div class="col" we overwrite the default padding size. When you put an element inside this div you will have proper padding between elements that are next to each other.

Best, Marta


May be misunderstood my question.

  1. Why there written '4' (.col .col-sm-4) instead of '3'? Because in the code example its written as '3', but in the visual example it's 4'.

  2. Why the column break is not working after second div? It should not keep 3 divs in one row. It should break the column after 2 divs.


Marta Szymanska staff pro premium answered 5 years ago

Hi,

  1. we will fix that bug in our documentation, thanks for noticing this.
  2. when a device has min-width: 576px there will be three four-column elements but also when the device has min-width: 768px then will appear additional div with width: 100% and display: block that causes a break between second and third element within a row.

Best, Marta


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.13.0
  • Device: computer
  • Browser: chrome
  • OS: win 10
  • Provided sample code: No
  • Provided link: No