How do I adjust the width of a column without dragging the resizing slider?

Options
kiwifruit
kiwifruit Member Posts: 17
edited October 2023 in Ask a Question

When I hover over a column I see a thick blue border with three dots (I'll call this a handle). I can drag the handle to resize a column which seems to jump to a pre-defined grid, i.e. I can't drag it 1 or 2 px, it jumps like 30 pixels at a time.

I want to have two buttons next to each other, how do I achieve this without using columns? Or is there another way to resize columns that I'm not aware of (likely as I started using Duda last week)?

See the two buttons on right? I want them to be next to each other with a small margin (spacing) in between. If I drag them into the same column then they end up stacking on top of each other so I'm spacing them out using columns.

All columns have 0 spacing except the yellow one.

The buttons are aligned right.

Tagged:

Answers

  • visioncraft
    visioncraft Member Posts: 148 Learner
    edited October 2023
    Options

    Probably the easiest way to work with layouts in Duda is by using Flex Sections and Flex Elements.

    A "flexbox" is a container that automatically aligns all its children either horizontally or vertically. You just add widgets into your 'flexbox', and tell the box how you want them aligned and spaced. It sounds simple, but it's actually very powerful, because you can nest one flexbox inside another.

    In Duda, Flex Sections, Flex Columns and Flex Elements are all flexboxes, with particular properties. A Flex Section is a flexbox that by default will align its columns horizontally on desktop, and vertically on mobile. You can add as many Flex Columns as you want, and you can specify how wide you want each column to be (in px, %, or several other measurement units), and specify spacing between the columns. You can have each Flex Column align its children either horizontally or vertically (the default), and again you can specify how you want the items aligned and spaced. If you want to align items in the 'opposite' direction — eg., you have a column with your widgets aligned vertically, but you need to put 2 buttons next to each other (= aligned horizontally) — you just drag in a Horizontal/Vertical Flexbox, and put your elements in that.

    I suggest you take the time to do the excellent DudaFlex University course, which is quick and easy, and will introduce you to all these essential concepts, which are sure to make it easier for you to build layouts that look and perform exactly as you need!