Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-4380

#405162: The columns block styles are broken on screens under 892px wide


    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Must have Must have
    • 2.9
    • 2
    • Gutenberg
    • Sprint #111

      Planet 4 Bug Report

      Requestor's email: sinder@greenpeace.org
      Requestor's Skype: Shawn Inder


      Description of the issue: When the narrow layout comes into effect (where
      all columns just appears as collapsible cards one on top of the other), the
      styles are broken and making things quite ugly (see screenshot).

      On the production page, I have hard-coded the block in HTML rather than
      using the block itself so that I could have 4 columns (there should be
      another bug about this somewhere. At the very least, you can find it on
      line 20 here:
      I then fixed the styling issue and have made things slightly better by
      adding a custom class to the whole block (columns-block-unbreak) and using
      the following CSS:
      <style type="text/css">
      .columns-block-unbreak .card-header {
      display: block;
      cursor: pointer;
      .columns-block-unbreak .card {
      clear: left;
      margin: 20px;
      Perhaps this will help fix the problem if it doesn't help identify it.

            pcuadrad Pablo Cuadrado (Inactive)
            sinder Shawn Inder (Inactive)
            0 Vote for this issue
            0 Start watching this issue