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

Columns block: Align CTA buttons in P4CG

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Fixed
    • Icon: Must have Must have
    • 2.25
    • None
    • 2
    • Block: Columns
    • Sprint #123, Sprint #124, Sprint #125, Sprint #126
    • jupiter

      While on the page https://release.k8s.p4.greenpeace.org/international/campaign/toolkit-plastic-free-future/ I noticed that there is an easy fix that would allow to get a decent alignment of the CTA buttons using flex display on the column container with justify-content: space-between and flex-grow: 1 specified only on the p tag (see PR), which results in the buttons being aligned both with the other buttons and horizontally inside of the column (see attached screenshots).

      I created this ticket specifically for the columns block, but we can probably apply the same technique to any layout element inside a column that needs a similar vertical alignment.

       

      Tasks

      • Align buttons/links in all styles for columns block
      • Investigate if this is related to the Campaign Content type overall or to the Plastic theme
      • Check if other blocks also need this fix and double check with Magali

      Covers https://jira.greenpeace.org/browse/PLANET-4356 (See more below)

      Page:
      https://release.k8s.p4.greenpeace.org/international/campaign/5-single-use-ban-in-your-community/

      Description of the issue: The CtA links for the Column Block, Icons Style
      are misaligned. They should appear on the same row, regardless of the
      length of the text used in the column descriptions.

        1. screenshot-1.png
          122 kB
          Luca Tiralongo
        2. Screenshot from 2020-02-03 17-33-37.png
          2.39 MB
          Pieter Vincent
        3. Screenshot from 2020-02-03 17-34-14.png
          2.18 MB
          Pieter Vincent

            pcuadrad Pablo Cuadrado (Inactive)
            pvincent Pieter Vincent (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: