Select Page

Split column borders and gutters

by | Jan 22, 2022 | Uncategorized

Split column borders and gutters.

 | SubscribeFavorite

Tagged: , , , 

Viewing 4 reply threads
  • Author
    Posts
    • DECEMBER 8, 2021 AT 11:50 AM#7140REPLY
      [email protected]

      Participant

      Is there a way to style wpo split columns, so each of the two has its own border, background and a gutter running between them?

    • DECEMBER 9, 2021 AT 8:55 PM#7142REPLY
      Chris F

      Keymaster

      A simple way to do this is to use a 2-column row rather than split-column module. When using the row, you can select individual design elements for each column by using “Element CSS” rather than “Row CSS”.

      Hope that helps. ;o)

    • DECEMBER 9, 2021 AT 11:50 PM#7144REPLY
      [email protected]

      Participant

      Thanks for that Chris, but due to the page layout I want it 1/2, 1/4, 1/4 with borders, backgrounds and spaces (gutters?) between.

      • DECEMBER 11, 2021 AT 10:50 PM#7145REPLY
        Chris F

        Keymaster

        OK, we need some Bootstrap for that. Simply create a new row in your template, add a Custom HTML module, then add the following code to that:

        <div class="container">
  <div class="row">
    <div class="col-sm-6 my-1">
      <div style="border: 2px solid #f00; padding: 10px; background: #eee;">
        1/2
      </div>
    </div>
    <div class="col-sm-3 my-1">
      <div style="border: 2px solid #0f0; padding: 10px; background: #eee;">
        1/4
      </div>
    </div>
    <div class="col-sm-3 my-1">
      <div style="border: 2px solid #00f; padding: 10px; background: #eee;">
        1/4
      </div>
    </div>
  </div>
</div>

        As you can see, I’ve designed each column individually by using inline CSS. You can also just create a class (if borders, backgrounds, etc. are the same), if you prefer.

        Hope that helps. ;o)

    • DECEMBER 12, 2021 AT 12:23 PM#7146REPLY
      [email protected]

      Participant

      Hi Chris. Thanks for that. It gives the desired styling effect. I had tried that originally (as I find my way through Bootstrap), but it wouldn’t stack on smaller screens, when I refreshed the webpage (not the wpo page) to check.

      However the issue was of a different technical sort. I found that if closed the page and then re-opened it, the elements would now stack. A minor glitch and maybe one that may just be Chrome browser specific to my PC, but I thought I’d mention it.

      p.s. What is the ‘my-1’ in <div class=”col-sm-6 my-1″> ?

      • DECEMBER 13, 2021 AT 9:42 PM#7149REPLY
        Chris F

        Keymaster

        Hi Martin –

        The my-1 is BS5 code for vertical margins:
        m = margin
        y = y-axis (i.e. vertical)
        1 = size of margin (in em)

        This is the same as: style=”margin-top: 4px; margin-bottom: 4px;”

        I added this to create a small margin (space between the sections) when shown in mobile view, so they don’t stack directly on top of each other without any space separating them.

        You can learn more about BS5 margins/padding here:
        https://getbootstrap.com/docs/5.1/utilities/spacing/#margin-and-padding

        Hope that helps. ;o)

    • DECEMBER 14, 2021 AT 2:03 PM#7151REPLY
      [email protected]

      Participant

      Thanks Chris. I’m getting my head around this more now.