Change width of columns

  • Unknown's avatar
    kbenson0616 · Member ·

    I have a place in my website with two columns. I don’t want them to be the same width. I’d like the left one to be about 1/3rd of the screen width on a desktop and the second column to be the other 2/3rds of the screen width. I can’t find a setting for column width.
    .
    I also tried using a table instead, but that didn’t work because in the right column I want a button shown. I can’t figure out how to put a block in a table cell. I was able to put a button block in a column.

    The blog I need help with is: (visible only to logged in users)

  • staff-zinnia · Staff ·

    I’ll be happy to take a closer look. Can you tell me where the 2 columns are located on the site? I did not find them when going through the site menu. Thanks.

  • Unknown's avatar
    kbenson0616 · Member ·

    No problem. The page is (resources. The middle of the page (buttons and descriptions) are in columns.

  • staff-zinnia · Staff ·

    Thanks. I am still working out on if we can actually customize the exact width of those columns. For now, you can left-align the buttons to give it more spacing. I think the overall look with the left aligned buttons is easier to read. I took a screen shot for you but did not save the changes in case that’s not what you’re going for.

    Click on Sites -> Pages -> Resources -> Edit
    Click on the top button
    – use the second icon from the left, select it, choose align left
    – repeat for the next 2 buttons
    Save changes

  • staff-zinnia · Staff ·

    One more bit of info. Click on the middle button. Use the second from the right hand icon, this will split your two columns further apart. Like this.

  • Unknown's avatar
    kbenson0616 · Member ·

    Thank you for your advice. I don’t want them further a part I want them closer. The button should be all the way to the left and the text lined up next to it with a little bit of space in between.

  • supernovia · Staff ·

    Hi @kbenson0616, have you thought about right-aligning the buttons? That bumps them up next to the text. The only thing is it looks a little weird on small screens, because the buttons then end up on the right.

    I noticed this is a test site, though. If you’re planning to upgrade to a plan that includes CSS, you could accomplish something nice with flexboxes, which are nicer than tables in that they can “collapse” on small screens if needed.

    Technically you can do it with inline CSS too, but it’s a bit messy. Try pasting this into an HTML block to see the effect though, and note you can of course adjust the padding / flex numbers, etc. With a custom CSS plan you would just do the CSS one time, separately.

    I’ve included a sample here: https://codepen.io/supernovia/pen/gJaBGm

  • Unknown's avatar
    kbenson0616 · Member ·

    Thank you. Now I more fully understand, what I need to do in WordPress. I took your html and pasted it into the bottom of my page. I am pleased now.

  • supernovia · Staff ·

    You bet. You can use much simpler and easier-to-manage code with a CSS upgrade, too.

    Let us know if you have more questions!

  • The topic ‘Change width of columns’ is closed to new replies.