How do I align content within a column?

Options
kiwifruit
kiwifruit Member Posts: 17

I can't see an align option for content within a column, e.g. left, right, centre.

The only way I can see to control the position of content is to use padding which seems strange (how would I know how much padding to apply on a phone vs. a desktop in order to centre or right align content?

Anyway, how do I align content within a column?

Also I noticed I can add padding to a button that pushes it outside the boundary of a column which makes no sense.

  • Blue border = column
  • Blur button with spacing pushing it outside the column

Tagged:

Best Answers

  • Bruce_McCaughan
    Bruce_McCaughan Member Posts: 130 Learner
    Answer ✓
    Options

    Sorry, I misunderstood.
    Within a column, in order to align ALL content/widgets the same, you'd likely need to manually add css.
    That said, all widgets, including buttons, can be aligned left-center-right (right click the widget to be presented with those choices).
    It is odd that a button would position itself outside of the column UNLESS you are using negative margin.

    Alignment and padding/margins are independent between desktop and mobile.

  • toby_sprolo
    toby_sprolo Member Posts: 5
    Answer ✓
    Options

    I struggled with this as well because it isn't obvious.
    If you right-click on the item you are dealing with, including buttons, there is a layout for the item.

    I accidentally found this while I was trying to find a way to do this.

Answers

  • Bruce_McCaughan
    Bruce_McCaughan Member Posts: 130 Learner
    Options

    To align the content, you need to do that from the "text" tab in the button editor.
    Essentially, you are aligning the "text" and not the content. So, it doesn't always play nice with the icon (if displayed). In such cases, you do need to play with padding as well.

    Unfortunately, one of many things that makes building/editing within Duda slow.

  • kiwifruit
    kiwifruit Member Posts: 17
    Options

    but if I'm aligning content that isn't text there doesn't seem to be a way to do this. Example I have a button that I want to align to the right of a column.
    Do I just add heaps of padding to force it to the right?

  • visioncraft
    visioncraft Member Posts: 148 Learner
    Options

    @kiwifruit the easiest solution is likely to be for you to use Flex Sections. You can specify the default alignment of child items inside Flex Columns, and you can override the default alignment on a widget-by-widget basis. So, for example, you can have all your widgets left-aligned in a column, but then specify that you want the call-to-action button at the bottom to be right-aligned.

    If this sounds like what you're trying to achieve, have a look at the DudaFlex support docs, and take the time to do the DudaFlex University course — it's quick, and definitely worth it, as it will clear many of the questions you have when you get started with Flex sections.

  • kiwifruit
    kiwifruit Member Posts: 17
    Options

    How do I know if I have access to flex columns?

  • visioncraft
    visioncraft Member Posts: 148 Learner
    Options

    I could be wrong, @kiwifruit, but I think Flex Sections are available to everyone.

    There's 2 ways to start using flex. First, you can create a new site, and select one of the Flex templates — this will start your site using flex sections throughout already:

    The second way is to add a Flex Section to an existing website. Just click the 'Add a Section' blue button where you want the new Flex section to be inserted, and then select from one of the available Flex Sections:

    Do you see these options?

  • kiwifruit
    kiwifruit Member Posts: 17
    Options

    Doesn't look like I have access to flex sections, thanks anyway