Containers in Grid alignment problem

  • Castletourist

    I have spent hours trying to figure out why I can’t line up my Grid containers horizontally. I thought I was making progress, but just can’t seem to do it. I must be missing somethign somewhere.
    Here is a link to the sample page: https://castletourist.com/trying-again/
    Thanks for your help.

  • Hi there,

    How do you want to the content to be aligned?

    Can you let me know what you are trying to achieve?

  • Right next to each other. The links will be in the red area and the stories will be on the lighter area of the parchment, but they will be directly across from each other.
    Before when I added a lot of text the link container just kept moving farther down the container.

    Thanks for your help. I appreciate it.

  • Right next to each other. The links will be in the red area and the stories will be on the lighter area of the parchment, but they will be directly across from each other.

    Sorry I don’t quite get the idea, what do you mean by “but they will be directly across from each other.”?

    Any chance you can provide a mockup? thanks!

  • Will try a mock up – just want the two containers to line up horizontally instead of stacked on top of each other – or at two different levels. Will try a mockup.
    Thanks.

  • Here you go. You will need to scroll down a bit.
    https://castletourist.com/trying-again/

  • I see.

    1. set display to block for gb-element-173b81f7.

    2. remove all the sizing values from gb-element-173b81f7 and gb-element-68c05112.

    3. if you want the gb-element-b2af34dc to have 2 columns with 60% 40% width, set its grid-template-columns to 3fr 2fr in the layout > grid layout.

  • Thanks, Ying.
    I have spent hours trying to figure this out and think that I made some changes.
    Where do I see the numbers of the blocks?
    I still cannot find where to put the percentages that will split a grid like I would like it – 70/30. I am sure it is right in front of my eyes and I am just not seeing it.
    The containers in the gride never seem to split.

    THe sad thing is that I am sure that I did splits in the past.
    Thanks for your help. I appreciate it.

  • When you select a block, you can see its class at the top of the styles panel:
    https://app.screencast.com/iwy1mHT5XkoLzI

    still cannot find where to put the percentages that will split a grid like I would like it – 70/30

    Tht grid-template-columns option is in the styles panel > layout > grid layout, you can set it to 7fr 3fr
    https://app.screencast.com/o4AmznMSucK82

  • Castletourist

    Thanks, Ying.
    I definitely am a slow learner, but think that I am getting closer!
    I thought those numbers for the blocks were just black lines.

    My effots get poor results. It’s seems that I am close, but so very far away.
    In my test page, I just want the content within that lighter brown box of the scroll and a link Headline on the red right bar – centered.
    Thanks for your patience with this confused person.

  • Hi there,

    Currently, the two columns inside the grid are wrapped inside a WP Group block. Can you avoid wrapping both columns with the Group block and instead place them directly inside the Grid block?

    Once that’s done, we can review the layout adjustment again.

  • Castletourist

    I believe that is now done.
    The image at the top is what I want to end up with.
    Think I may need 80/20 columns.

  • You’ve set the grid-template-columns of the Grid block to repeat7,minmax(0,3fr) which is an invalid value, change it to 4fr 1fr.

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.