How to create a full-width container with centered content?

  • Resolved MemeRunner

    (@memerunner)


    5 years, 10 months ago

    Toward the bottom of my page …
    [ redundant link removed ]

    … I have a section titled onTopic, for which I’m trying to create a full-width background color, while keeping the contents of this section centered, as they are now.

    I created an AB Container block, made it full-width, and inside that container tried using columns to center the contents. But I can’t tell how to create the padding on the side columns, or either getting a single centered column, or merging 2 columns.

    Would greatly appreciate any input on this, or where I can find good information on how to work with the Container block.

    thx
    doug

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author atomicblocks

    (@atomicblocks)

    Hi Doug,

    Thanks for your question. I would recommend doing this with the new Advanced Columns block. You could also achieve it with the Container block, but the Advanced Columns is more powerful and has more options to customize.

    First, add the Advanced Column block to your page and select the One Column layout. Then, add your your onTopic content to the One Column layout. Once the content is in there, you can edit the container background, inner width, background colors, etc. Check out this helpful wiki page and demo video to get the hang of how to work with the Advanced Column block. Once you figure it out, it’s a really powerful block and you can do all kind of nice layouts with it! Hope that helps!

    Mike

    • This reply was modified 5 years, 10 months ago by atomicblocks.
    Thread Starter MemeRunner

    (@memerunner)

    Thanks, Mike.

    That’s really slick. Using this all over my site.

    One question I have is, While I’ve centered the columns vertically, and locked the padding at 24p for the entire Advanced Columns block, the contents are still aligned towards the top of the block.

    For reference, it’s the two gray background sections on this page.
    /product-services/

    Anything I might be overlooking?

    thanks
    doug

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to create a full-width container with centered content?’ is closed to new replies.