how to have overlapping columns?

  • Resolved chzumbrunnen

    (@chzumbrunnen)


    3 years, 11 months ago

    I’d like to create a reusable block to get something like an the screenshot below taken from here

    https://www.screencast.com/t/esnR4QrSsdVF

    I tried with Text and Media block and with GPblocks Container plus Grid but I couldn’t get the list overlap the image.

    (I get how to use icons as bullets in the list, although I’m not sure if my method is good) but my question now is only:

    Is it possible to make a text / list block overlap the image?

    I understand that CSS grid would allow this, but I have no clue on how to do this within existing blocks.

    Any hints to geht me out of my dead end would be appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support David

    (@diggeddy)

    Hi there,

    1. Add a 2 column GB Grid Container Block.

    2. Select the grid parent container and set its vertical alignment to center. And set the horizontal space to 0

    3. Select the right hand grid container column and in Spacing give it a Min-height of 500px ( you can tweak this later )
    3.1 Switch to Mobile responsive view to adjust the height for mobile, and look under Layout you will see an Order Field. Set this to -1 this will position this container above the left hand container on mobile.

    4. Populate the left hand grid container column with your list etc. Style it with some padding, border radius and background color.
    4.1 Now to create the overlap with the left hand container still selected go to its Spacing, first set the Outer z-index to 1 Then set its right margin to -100px and its left margin to 100px. This will move the left hand cover over the top of the right.
    Note: you will need to select the Tablet responsive view and tweak those margins, for the Mobile responsive view you will need to set them to 0

    Then its just a case of tweaking column width %’s, heights and margins etc to suit.

    Thread Starter chzumbrunnen

    (@chzumbrunnen)

    Hey David, thank you very much.

    That works, only thing is: in the editor the list doesn’t show in the right order which makes it look like it’s not working while editing. On the live site or even the preview on the other hand, it’s correct.
    But this irritate me a bit, that’s why I wanted to mention it in the answer.
    Hope it will be helpful for others.

    Great! Thanks you so much for your help.

    • This reply was modified 3 years, 11 months ago by chzumbrunnen.
    Plugin Support David

    (@diggeddy)

    When you say the list is not in the right order ? is this the list block or the order of the blocks when viewed in Mobile preview inside the editor ?

    Thread Starter chzumbrunnen

    (@chzumbrunnen)

    sorry, I meant the z-index order is not correct in the editor

    it looks like this in the editor:
    block-z-index-editor.png

    and like this live:
    block-z-index.png

    I’m not sure exactly why the editor view is not correct, but it’s actually not a problem if I know it.

    Plugin Support David

    (@diggeddy)

    aah ok – are you running the latest version of the the GB plugin ?

    Thread Starter chzumbrunnen

    (@chzumbrunnen)

    well, I think so, Version 1.2.0

    Plugin Support David

    (@diggeddy)

    Hmmm… i’ll take a look to see whats going on.
    Thanks for letting us know.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘how to have overlapping columns?’ is closed to new replies.