Grouping Elements in Upfront Issue (grabbing extra space)


I am having an issue with grouping elements in Upfront. When I use my mouse to "grab" the elements I want to put together, it is also including a spacer that is in between two areas that I want a space between. I have attached examples of the ungrouped and grouped so you can see what I mean. I am not dragging the selector anywhere near that space when I select the elements either.

Bonus question - why isn't there an option to put borders around a group like there is with text boxes? That would be super helpful in this instance.


  • Nastia

    Hello Stacy , I hope you are doing well today!

    I can't replicate the same on your site. Would yu please clarify, are you trying to group the two columns together or each column separately?
    I've selected all the elements from one column, grouped them and additional space wasn't added.

    Bonus question - why isn't there an option to put borders around a group like there is with text boxes?

    It is possible to add a border with CSS code. Use the code bellow to add a border.

    #wrapper-1481052186553-1660, #module-group-1481048708082-1743 {
       border: turquoise;
        border-style: solid;
        border-width: 2px;
        width: 44%;
        position: relative;

    Change the color turquoise to any other color you like and add this code to Theme Settings > Global Theme CSS.

    Please advise,


  • Stacy

    Hi Nastia,

    Thanks for your reply! I recorded a short video to demonstrate the issue - I want the two boxes to be the same size with two columns space in the middle. I tried opening the editor in firefox instead of chrome and still have the same problem. Your help is greatly appreciated... Even if you can do it for me, since you couldn't replicate the issue I would appreciate that. Otherwise, I will have to find another way to accomplish this in the next few hours.

  • Sajid

    Hello Stacy,
    Hope you are doing good today :slight_smile:

    Like Nastia, I also could not replicate this issue on my own test site. It only selects the area that needs to be selected.

    However, if click and drag selection don't work. Then could you please try shift + click method. For example, keep pressing the shift key on key board and then click on the elements that you want to include in a group.

    Also, make sure all elements in group are of same sizes and all have same padding set. For example, if buttons element don't have padding block added then it can cause issues.

    On a side note, I can't see any issue regarding layout on your website. It displays just fine and stack nicely on mobile screens. That said, the area selected in Upfront editor does not gets added on frontend. So you can ignore that.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.