[Resolved] “Abstract” Theme 2 questions: width and buttons

Home Forums Support [Resolved] “Abstract” Theme 2 questions: width and buttons

Home Forums Support “Abstract” Theme 2 questions: width and buttons

  • This topic has 5 replies, 2 voices, and was last updated 1 month ago by Ying.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1933123
    Ruthanne

    Hello! I’m working on this site here: https://ruthannereid.com

    I have two questions – thanks in advance for your help!

    1. There is some weird stuff going on in posts. Some of the text is full-width, and some of it is properly contained. How do I make it consistent so it’s all in a column in the center instead of stretching full-screen? Example: https://ruthannereid.com/book-news/new-story-every-good-servant/

    2. Does anyone know how to make these buttons justify to the bottom of each column? https://ruthannereid.com/books/

    Thank you!

    #1933149
    Ying
    Staff
    Customer Support

    Hi there,

    Can you go to appearance > elements, remove the posts from the layout element which sets pages/posts to full width?
    https://www.screencast.com/t/UyKJQhgf3c7

    For question 2, I see you are using GenerateBlocks already, I would recommend to use Grid block from GB instead of WP’s Columns block to build the layout.

    Since the columns block doesn’t come with a specific ID, it’s very difficult to target using CSS.

    Once it’s done, please get back to us, we can offer some CSS solution ๐Ÿ™‚

    #1933163
    Ruthanne

    Hi, and thanks so much for the help! The posts trick worked like a charm.

    I believe Iโ€™ve moved the blocks over properly to grids. Whatโ€™s next? ๐Ÿ™‚

    #1933195
    Ying
    Staff
    Customer Support

    Good job, then you can try add this CSS:

    .gb-grid-wrapper-95f84891 > .gb-grid-column > .gb-container >.gb-inside-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .gb-grid-wrapper.gb-grid-wrapper-95f84891 > .gb-grid-column >.gb-container > .gb-inside-container >*:last-child {
        margin-top: auto;
    }

    And actually you don’t need to add 2Gridblocks for the 3 + 2 columns layout, you just need one Gridblock with 5 containers.

    Here’s the documentation of Grid block, hope it’s useful for you:
    https://docs.generateblocks.com/article/grid-overview/

    Set the first 3 Grid > Containers to 33% in width, and the last 2Grid > Containerto 50% in width.

    Then you can select the Gridblock add vertical and horizontal Gap accordingly for different width devices ๐Ÿ™‚

    #1933230
    Ruthanne

    You’re amazing! It looks SO good!

    I also took your tip about understanding that Grid block better, and now the whole page is in that grid format. ๐Ÿ™‚ Terrific advice. Thank you!

    #1934021
    Ying
    Staff
    Customer Support

    You are very welcome!

    Happy to be helpful ๐Ÿ™‚

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