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

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

XMLWordPrintable

    • 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

      Page:
      https://release.k8s.p4.greenpeace.org/canada/en/copy-of-join-the-reuserevolution/

      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:
      https://docs.google.com/spreadsheets/d/1CTePqlEYQn3bXeBfvvMf1iCoycQXWyL4eSqBlReLtyg/edit#gid=0).
      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;
      }
      </style>
      Perhaps this will help fix the problem if it doesn't help identify it.

        1. 405162.png
          354 kB
          Erick Consejo

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

              Created:
              Updated:
              Resolved: